@import './colors.less';

/* Classe POINTER per l'hover */
.pointer:hover {
  cursor: pointer;
}

/* Select */
.my-select {
  .el-input { 
    --el-input-border-color: 0 !important;
    --el-input-focus-border-color: 0 !important;
    --el-input-hover-border-color: 0 !important;
    --el-input-border: 0 !important;
    --el-input-hover-border: 0 !important;
    --el-input-focus-border: 0 !important;
    --el-select-border-color-hover: 0 !important;
    --el-select-disabled-border: 0 !important;
    --el-select-input-focus-border-color: 0 !important;
    .el-input__wrapper {
      .el-input__inner {
        font-family: 'roboto-regular';
        font-size: 15px;
        color: #666;
      }
    }
  }
  .el-select__tags {
    .el-tag {
      padding: 0 3px;
      margin: 4px 10px 0 0 !important;
      height: 20px !important;
      .el-select__tags-text {
        font-family: 'roboto-regular';
        font-size: 15px;
        color: #666;
      }
    }
  }
}
.el-select-dropdown {
  .el-select-dropdown__item {
    font-family: 'roboto-regular';
    &.selected {
      color: @login_sfondo !important;
    }
    &.selected::after {
      background-color: @login_sfondo !important;
    }
  }
}

/* Input */
.my-input {
  &.el-input { 
    --el-input-border-color: 0 !important;
    --el-input-focus-border-color: 0 !important;
    --el-input-hover-border-color: 0 !important;
    --el-input-border: 0 !important;
    --el-input-hover-border: 0 !important;
    --el-input-focus-border: 0 !important;
    --el-select-border-color-hover: 0 !important;
    --el-select-disabled-border: 0 !important;
    --el-select-input-focus-border-color: 0 !important;
    --el-input-bg-color: none !important;
    --el-input-border-radius: 0 !important;
    --el-input-icon-color: @login_grigio !important;
    --el-input-placeholder-color: @login_grigio !important;
    .el-input__wrapper {
      .el-input__inner {
        font-family: 'roboto-regular';
        font-size: 15px;
        color: #666;
      }
    }
  }
}

/* Button */
.my-button {
  --el-button-font-weight: none !important;
  --el-button-border-color: @arancio !important;
  --el-button-bg-color: @arancio !important;
  --el-button-text-color: #fff !important;
  --el-button-disabled-text-color: #fff !important;
  --el-button-disabled-bg-color: @arancio !important;
  --el-button-disabled-border-color: @arancio !important;
  --el-button-divide-border-color: @arancio !important;
  --el-button-hover-text-color: #fff !important;
  --el-button-hover-bg-color: @arancio !important;
  --el-button-hover-border-color: @arancio !important;
  --el-button-active-text-color: #fff !important;
  --el-button-active-border-color: @arancio !important;
  --el-button-active-bg-color: @arancio !important;
  letter-spacing: 1px;
  font-size: 15px !important;
  padding: 0 15px !important;
  border-radius: 3px !important;
  text-transform: uppercase;
  height: 35px !important;
  padding: 0 20px !important;
  font-family: 'roboto-medium';
  &.is-loading::before {
    background-color: transparent !important;
  }
}
.my-button-white {
  --el-button-font-weight: none !important;
  --el-button-border-color: @arancio !important;
  --el-button-bg-color: #fff !important;
  --el-button-text-color: @arancio !important;
  --el-button-disabled-text-color: @arancio !important;
  --el-button-disabled-bg-color: #fff !important;
  --el-button-disabled-border-color: @arancio !important;
  --el-button-divide-border-color: @arancio !important;
  --el-button-hover-text-color: @arancio !important;
  --el-button-hover-bg-color: #fff !important;
  --el-button-hover-border-color: @arancio !important;
  --el-button-active-text-color: @arancio !important;
  --el-button-active-border-color: @arancio !important;
  --el-button-active-bg-color: #fff !important;
  letter-spacing: 1px;
  font-size: 15px !important;
  padding: 0 15px !important;
  border-radius: 3px !important;
  text-transform: uppercase;
  height: 35px !important;
  padding: 0 20px !important;
  font-family: 'roboto-medium';
  &.is-loading::before {
    background-color: transparent !important;
  }
}

/* Collapse */
.my-collapse {
  &.el-collapse {
    --el-collapse-border-color: none !important;
    --el-collapse-header-bg-color: none !important;
    --el-collapse-header-text-color: none !important;
    --el-collapse-content-bg-color: none !important;
    --el-collapse-content-text-color: none !important;;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
}

/* Checkbox */
.my-checkbox {
  &.el-checkbox {
    --el-checkbox-font-size: none !important;
    --el-checkbox-font-weight: none !important;
    --el-checkbox-text-color: none !important;
    --el-checkbox-input-height: none !important;
    --el-checkbox-input-width: none !important;
    --el-checkbox-border-radius: none !important;
    --el-checkbox-bg-color: none !important;
    --el-checkbox-input-border: none !important;
    --el-checkbox-disabled-border-color: none !important;
    --el-checkbox-disabled-input-fill: none !important;
    --el-checkbox-disabled-icon-color: none !important;
    --el-checkbox-disabled-checked-input-fill: none !important;
    --el-checkbox-disabled-checked-input-border-color: none !important;
    --el-checkbox-disabled-checked-icon-color: none !important;
    --el-checkbox-checked-text-color: none !important;
    --el-checkbox-checked-input-border-color: none !important;
    --el-checkbox-checked-bg-color: none !important;
    --el-checkbox-checked-icon-color: none !important;
    --el-checkbox-input-border-color-hover: none !important;
  }
}

/* Spinner */
.el-loading-mask {
  .el-loading-spinner {
    .path {
      stroke: @sfondo;
    }
  }
}

/* SCROLL BAR */
::-webkit-scrollbar {
  width: 0.6em;
  height: 0.8em;
  background: transparent;
  margin-right: 10px;
}
::-webkit-scrollbar:hover {
  background-color: transparent;
  border: none;
}
::-webkit-resizer {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  background-color: transparent;
  border: none;
}
::-webkit-scrollbar-thumb {
  min-height: 0.8em;
  min-width: 0.8em;
  border-radius: 4px;
  -webkit-border-radius :4px;
  background-color: transparent;
  border: none;
}
::-webkit-scrollbar-thumb:hover {
  background-color: @login_sfondo;
  border: none;
}
::-webkit-scrollbar-thumb:active {
  background-color: transparent;
  border: none;
}

/* Dialog */
.my-dialog {
  .el-dialog__header {
    margin: 0 25px;
    padding: 15px 0 10px 0;
    border-bottom: 1px solid @sfondo;
    .el-dialog__title {
      color: @sfondo;
      text-transform: uppercase;
      font-family: 'roboto-medium';
      font-size: 18px;
    }
    .el-dialog__headerbtn {
      top: 0;
      right: 10px;
      height: 50px;
      width: 50px;
      display: flex;
      justify-content: center;
      .el-dialog__close {
        font-size: 22px;
        color: #666;
        align-self: center;
      }
    }
    .el-dialog__headerbtn:focus {
      outline: 0;
    }
  }
  .el-dialog__footer {
    padding: 15px 25px;
  }
  .el-dialog__body {
    padding: 20px 25px 5px 25px;
  }
}

/* Dropdown */
.my-dropdown {
  .el-dropdown-menu__item {
    font-family: 'roboto-regular';
    font-size: 15px;
    color: #666;
  }
  .el-dropdown-menu__item:focus {
    background-color: #fff !important;
    color: @sfondo !important;
  }
}

/* Table */
.my-table {
  .el-table__inner-wrapper::before {
    display: none;
  }
  .el-table__header-wrapper {
    .el-table__header {
      tr {
        th {
          border-bottom: 1px solid @sfondo;
          padding: 2px 0;
          .cell {
            font-family: 'roboto-medium';
            font-size: 16px;
            color: @sfondo;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 23px;
            padding-top: 2px;
          }
          .caret-wrapper {
            width: 14px;
            i {
              left: 5px;
            }
            .ascending {
              border-bottom-color: #ccc;
            }
            .descending {
              border-top-color: #ccc;
            }
          }
          &.descending {
            .caret-wrapper {
              .descending {
                border-top-color: @sfondo;
              }
            }
          }
          &.ascending {
            .caret-wrapper {
              .ascending {
                border-bottom-color: @sfondo;
              }
            }
          }
        }
      }
    }
  }
  .el-table__body-wrapper {
    .el-table__body {
      tr {
        td {
          padding: 7px 0;
          .cell {
            font-family: 'roboto-regular';
            font-size: 15px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 23px;
            padding-top: 2px;
          }
        }
      }
      tr:hover > td {
        background-color: transparent !important;
      }
    }
  }
}

/* Confirm */
.my-confirm {
  --el-messagebox-width: 450px !important;
  .el-message-box__header {
    padding: 10px 0 7px 0;
    margin: 0 10px;
    border-bottom: 1px solid @sfondo;
    .el-message-box__title {
      font-family: 'roboto-medium';
      font-size: 18px;
      color: @sfondo;
    }
    .el-message-box__headerbtn {
      top: 8px;
      right: 0;
    }
    .el-message-box__headerbtn:focus {
      outline: 0 !important;
    }
    .el-message-box__headerbtn:hover {
      .el-message-box__close {
        color: #666;
      }
    }
  }
  .el-message-box__content {
    padding: 20px 10px;
    .el-message-box__message {
      font-family: 'roboto-regular';
      font-size: 15px;
      color: #666;
    }
  }
  .el-message-box__btns {
    .cancel-button {
      height: 30px !important;
    }
    .confirm-button {
      height: 30px !important;
    }
    .confirm-custom-button {
      height: 30px !important;
    }
  }
}

/* Paginator */
.my-paginator {
  margin-top: 25px;
  justify-content: center;
  .el-pager {
    li {
      border: 1px solid #ccc;
      border-right: 0;
      padding: 0;
      margin: 0;
      color: #666;
      font-family: 'roboto-medium';
      &:last-child {
        border-right: 1px solid #ccc;
      }
      &.is-active {
        background-color: @sfondo;
        color: #fff;
        border-color: @sfondo;
      }
      &.is-active:hover {
        color: #fff;
      }
    }
    li:hover {
      color: #666;
    }
    li.is-active+li {
      border-left: 1px solid #ccc;
    }
  }
  button {
    color: #666 !important;
  }
  button:hover {
    color: #666 !important;
  }
}

/* Datepicker */
.my-datepicker {
  width: 160px !important;
  height: 30px !important;
  .el-input__wrapper {
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px #ccc;
    &.is-focus {
      box-shadow: 0 0 0 1px @sfondo !important;
    }
    .el-input__inner {
      color: #666;
      font-family: 'roboto-regular';
      font-size: 15px;
      height: 30px;
      line-height: 30px;
      padding-top: 2px;
    }
  }
  .el-input__wrapper:hover {
    box-shadow: 0 0 0 1px #ccc;
  }
}
.el-date-picker {
  .el-picker-panel__body {
    .el-date-picker__time-header {
      .el-time-panel {
        .el-time-panel__footer {
          .confirm {
            color: @sfondo;
          }
        }
      }
    }
    .el-date-picker__header {
      .el-date-picker__header-label:hover {
        color: @sfondo;
      }
      .el-date-picker__prev-btn {
        button:focus {
          outline: 0 !important;
        }
        .el-picker-panel__icon-btn {
          margin-top: 0;
        }
        .el-picker-panel__icon-btn:hover {
          color: @sfondo;
        }
      }
      .el-date-picker__next-btn {
        button:focus {
          outline: 0 !important;
        }
        .el-picker-panel__icon-btn {
          margin-top: 0;
        }
        .el-picker-panel__icon-btn:hover {
          color: @sfondo;
        }
      }
    }
    .el-picker-panel__content {
      .today {
        .el-date-table-cell__text {
          color: @sfondo;
        }
      }
      .available:hover {
        .el-date-table-cell__text {
          color: @sfondo;
        }
      }
      .current {
        .el-date-table-cell__text {
          background-color: @sfondo;
        }
      }
      .current:hover {
        .el-date-table-cell__text {
          color: #fff;
        }
      }
      .el-month-table {
        td {
          .cell:hover {
            color: @sfondo;
          }
          &.current {
            .cell {
              color: @sfondo !important;
              font-weight: 700 !important;
            }
          }
          &.today {
            .cell {
              color: var(--el-datepicker-text-color);
              font-weight: unset;
            }
          }
        }
      }
    }
  }
  .el-picker-panel__footer {
    .is-plain:hover {
      --el-button-hover-text-color: @sfondo;
      --el-button-hover-bg-color: unset;
      --el-button-hover-border-color: @sfondo;
    }
  }
}

/* Notification */
.el-notification {
  .el-notification__content {
    text-align: left;
  }
}

/* Popper */ 
.el-popper {
  .el-select__collapse-tags {
    .el-select__tags-text {
      font-family: 'roboto-regular';
    }
  }
}

.classe-test {
  color: @arancio;
}