.ng-select-container-search {
  color: initial !important;
  font-size: initial;
  height: 5em !important;
  padding-top: 2em !important;
  padding-bottom: 0.5em !important;
  mat-pseudo-checkbox,
  .mat-pseudo-checkbox {
    display: none;
  }
  & + .ng-select-container-options {
    overflow: auto;
    max-height: 185px;
  }
}
.ng-select-container-option {
  & > .mat-option-text {
    display: flex;
    align-items: center;
  }
  & > .mat-option-text > .ng-select-container-option-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }
  &.ng-select-container-option-empty > .mat-option-text {
    justify-content: center;
  }
}

mat-form-field {
  width: 100%;
}

@mixin createColorInputs(
  $mat-name,
  $color,
  $color-light,
  $color-error,
  $color-text,
  $color-text-secondary,
  $color-background,
  $color-text-primary-contrast: $color-text-secondary
) {
  .mat-#{$mat-name} {
    // TOOGLE DATE PÌCKER
    & .mat-datepicker-toggle.mat-datepicker-toggle-active {
      color: $color !important;
    }

    // SELECT
    &.mat-form-field.mat-focused .mat-select-arrow,
    .mat-option.mat-selected:not(.mat-option-disabled) {
      color: $color !important;
    }

    // INPUT
    .ng-mat-button-primary {
      color: $color-text !important;
      background-color: $color !important;
    }
    .ng-mat-button-danger {
      color: $color-text !important;
      background-color: $color-error !important;
    }
    &.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline,
    &.mat-form-field.mat-focused .mat-form-field-label {
      color: $color !important;
    }
    &.mat-form-field-appearance-outline .mat-form-field-outline {
      background-color: $color-background !important;
      border-radius: 5px;
    }
    &.mat-form-field-appearance-outline.mat-focused.mat-form-field-invalid
      .mat-form-field-outline,
    &.mat-form-field.mat-focused.mat-form-field-invalid .mat-form-field-label {
      color: $color-error !important;
    }

    // CHECKBOX
    &.mat-checkbox .mat-ripple-element,
    &:not(.mat-checkbox-disabled).mat-checkbox-indeterminate.mat-primary
      .mat-checkbox-background,
    &:not(.mat-checkbox-disabled).mat-checkbox-checked.mat-primary
      .mat-checkbox-background,
    &:not(.mat-checkbox-disabled).mat-slide-toggle.mat-primary.mat-checked
      .mat-slide-toggle-thumb,
    &:not(.mat-checkbox-disabled).mat-form-field.mat-focused:not(.mat-form-field-invalid)
      .mat-form-field-ripple {
      background-color: $color !important;
    }
    &.mat-slide-toggle .mat-ripple-element,
    &.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
      background-color: $color-light !important;
    }

    // RADIO
    &.mat-radio-button.mat-radio-checked .mat-radio-outer-circle {
      border-color: $color !important;
    }
    &.mat-radio-button .mat-ripple-element,
    &.mat-radio-button.mat-radio-checked .mat-radio-persistent-ripple,
    &.mat-radio-button.mat-radio-checked .mat-radio-inner-circle {
      background-color: $color !important;
    }

    // SLIDER
    &.mat-slider:not(.mat-slider-disabled):not(.mat-slider-min-value) {
      &
        > .mat-slider-wrapper
        > .mat-slider-track-wrapper
        > .mat-slider-track-fill {
        background-color: $color;
      }
      &
        > .mat-slider-wrapper
        > .mat-slider-thumb-container
        > .mat-slider-thumb {
        background-color: $color;
      }
      &
        > .mat-slider-wrapper
        > .mat-slider-thumb-container
        > .mat-slider-thumb-label {
        background-color: $color;
      }
      &
        > .mat-slider-wrapper
        > .mat-slider-thumb-container
        > .mat-slider-thumb-label
        > .mat-slider-thumb-label-text {
        color: $color-text-primary-contrast !important;
      }
    }

    // KNOB
    &.ng-knob {
      border-color: $color-background !important;
      background-color: $color-background !important;
      box-shadow: inset 0 0 1em #222, inset 0 0 1em #222 !important;

      &::before {
        border-color: $color-background !important;
      }

      & > .pointer::after,
      & > .pointer::before {
        background-color: $color !important;
        box-shadow: 0 0 2px #222 !important;
      }
      & > .pointer > .separator,
      & > .ticket::after {
        background-color: $color !important;
      }
    }

    // CALENDARIO
    &.mat-datepicker-content mat-calendar {
      user-select: none;
      div.mat-calendar-body-selected {
        background-color: $color !important;
      }
      td.mat-calendar-body-cell:hover:not(.mat-calendar-body-disabled)
        .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
      td.mat-calendar-body-active
        .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
        background-color: $color-light !important;
      }
      .theme-light
        .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
      .theme-dark
        .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
        border-color: $color !important;
      }

      .mat-calendar-selected-day {
        border-radius: 50%;
        background: var(--color-danger) !important;
      }
      .mat-calendar-selected-time {
        border-radius: 50%;
        background: var(--color-warning) !important;
      }
    }
  }

  // TIMER PICKER
  mat-timepicker-dialog {
    mat-dialog-content {
      .root {
        mat-toolbar > .placeholder {
          display: none;
        }
        mat-toolbar[ng-reflect-color="#{$mat-name}"] {
          background-color: $color !important;
        }
        mat-clock[ng-reflect-color="#{$mat-name}"] {
          button.mat-#{$mat-name} {
            background-color: $color !important;
            color: $color-text !important;
          }
          .root {
            .circle {
              .number {
                color: #000 !important;
                &.selected {
                  color: $color-text !important;
                }
              }
            }
          }
        }
      }
    }
  }
}

@mixin createMap() {
  .ng-mapboxgl-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    & > ng-autocomplete {
      top: 10px;
      right: 10px;
      min-width: 350px;
      position: absolute;
      @media (max-width: 728px) {
        left: 10px;
        min-width: auto;
      }
    }
    & > .ng-mapboxgl {
      width: 100%;
      height: 100%;
    }
  }
}

// FILEDS
.ng-slider {
  display: flex;
  align-items: center;

  &.ng-slider-readonly {
    touch-action: none;
    pointer-events: none;
  }

  & > .ng-prefix {
    padding: 0 8px;
  }

  & > mat-slider {
    min-width: auto !important;
    width: 100%;
  }

  & > .ng-suffix {
    padding: 0 16px;
  }
}

mat-form-field {
  &.ng-small {
    font-size: 12px;
  }
  &.ng-small .ng-icon-img {
    width: 24px !important;
    height: 24px !important;
  }
  &.ng-small .ng-preview-color {
    position: relative;
    top: -1px;

    width: 24px;
    height: 24px;
  }
  &.mat-form-field-appearance-outline.ng-small .mat-form-field-infix {
    padding: 0.3em 0 0.5em !important;
  }
  &.mat-form-field-appearance-outline.ng-small
    .mat-form-field-infix
    > .mat-form-field-label-wrapper
    > .mat-form-field-label {
    top: calc(1.84375em - 0.6em);
  }
  &.mat-form-field-appearance-outline.ng-small.mat-focused
    .mat-form-field-infix
    > .mat-form-field-label-wrapper
    > .mat-form-field-label,
  &.mat-form-field-appearance-outline.ng-small
    .mat-form-field-infix
    > .mat-form-field-label-wrapper
    > .mat-form-field-label:not(.mat-form-field-empty) {
    transform: translateY(calc(-1.59375em + 0.6em)) scale(0.75);
  }

  & .mat-form-field-wrapper .mat-form-field-flex {
    align-items: center !important;
  }
  & .mat-form-field-wrapper .mat-form-field-prefix {
    padding-right: 5px;
  }
  & .mat-form-field-wrapper .mat-form-field-suffix {
    padding-left: 5px;
  }
  & .mat-form-field-wrapper .mat-form-field-prefix,
  & .mat-form-field-wrapper .mat-form-field-suffix {
    display: flex;
    align-items: center;
  }

  &.ng-text-help > .mat-form-field-wrapper {
    padding-bottom: 0 !important;
  }
  &.mat-form-field-readonly {
    touch-action: none !important;
    pointer-events: none !important;
  }
  &:not(.mat-form-field-has-label) {
    .mat-form-field-infix {
      border-top-width: 7px;
    }
    &.ng-small .mat-form-field-infix {
      padding: 0.3em 0 0.5em 0;
    }
  }

  &.mat-form-field-appearance-outline .mat-form-field-outline-end {
    z-index: 2;
  }

  & mat-spinner.ng-suffix-loading {
    position: relative;
    margin: 0 5px !important;
  }

  &.mat-form-field-appearance-outline
    .mat-form-field-suffix
    > span.ng-star-inserted,
  &.mat-form-field-appearance-outline
    .mat-form-field-prefix
    > span.ng-star-inserted {
    position: relative;
  }
}

// SWITCH AND CHECKBOX
mat-slide-toggle.ng-space-between,
mat-checkbox.ng-space-between {
  width: 100%;
  & > label {
    width: 100%;
    justify-content: space-between;
  }
  & > label > .mat-checkbox-label {
    width: 100%;
  }
}

// COLOR PICKER
.ng-color-picker-overlay {
  padding: 20px;
  border-radius: 5px;
  background-color: var(--color-background-light);
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%);
}

.ng-preview-color {
  width: 32px;
  height: 32px;

  left: 0;
  cursor: pointer;

  & > div {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
}

.ng-color-picker-transparent {
  display: flex;
  align-items: center;
  justify-content: center;

  background-size: 10px !important;
  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>') !important;

  border-radius: 5px !important;
}