/*******************************
         Theme Overrides
*******************************/
/*******************************
            Button
*******************************/

.ui.button {
  cursor: pointer;
  display: inline-block;

  min-height: 0.7rem;
  letter-spacing: 1px;
  line-height: 1.3em;

  &.tiny {
    min-width: 100px;
    padding-top: 11px;
    padding-bottom: 11px;

    img.icon {
      height: 12px!important;
    }

  }

  &.disable-button {
    .icon {
      color: #B8BCD9;
      font-weight: bold;
    }
  }

  &.modal-cancel {
    color: @black;
    background-color: #EDEDF2;
  }

  &.near {
    margin-left: -25px;
  }

  &.filter-button {
    padding: 12px!important;
    height: 37px;
    width: 38px;
    font-size: 0.9rem!important;

    .icon {
      width: 16px;
      height: 16px;
    }
  }

}

.ui.yellow.button:hover, .ui.yellow.buttons .button:hover {
  background-color: #D9A200;
}

.ui.pink.button:hover, .ui.pink.buttons .button:hover {
  background-color: #D92B69;
}

.ui.grey.button, .ui.grey.buttons .button {
  background-color: #EDEDF2;
  color: #0e101a;
}

.ui.grey.button:hover, .ui.grey.buttons .button:hover {
  background-color: #DADAE6;
  color: #0e101a;
}

#edit-button .icon {
  vertical-align: unset;
}

.ui.button.add-item-button {
  width: 12px;
  height: 12px;
  background-color: #2F323F!important;
  padding: 12px 25px 23px 12px!important;

  border: 1px solid #4A4F7C;
  border-radius: 20px;

  &.visible {
    background-color: #FF3C81!important;
    border: 1px solid #FF3C81!important;
    box-shadow: none!important;
    --webkit-box-shadow: none!important;
    .icon {
      color: #EDEDF2!important;
    }
  }

  &:hover:not(.visible) {
    background-color: #EDEDF2!important;
    border: 1px solid #EDEDF2!important;
    .icon {
      color: #4A4F7C!important;
    }
  }

  .icon {
    font-size: 12px;
    color: #FF3C81!important;
  }


}