input::placeholder,
input:-ms-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-ms-input-placeholder{
  color: var(--color-on-surface-neutral-secondary);
}

mat-form-field{
  .mat-mdc-text-field-wrapper{
    padding: 0;
  }
  .mdc-text-field--no-label{
    .mat-mdc-form-field-flex{
      margin-top: 0 !important;
    }
  }
  .mat-mdc-form-field-flex{
    margin-top: 18px;
    border: 1px solid var(--color-on-surface-neutral-disabled);
    border-radius: var(--border-radius-data-input);
    padding: 3px 8px;
    min-height: 32px;
    height: 32px;
    transition: all var(--transition-default);
    &:hover{
      background-color: var(--color-surface-neutral-hover);
      border: 1px solid var(--color-on-surface-neutral-secondary);
    }
  }
  &.mat-focused{
    .mat-mdc-form-field-flex{
      border: 1px solid var(--color-on-surface-neutral-secondary) !important;
    }
  }
  .mdc-text-field .mdc-floating-label {
    top: -23px !important;
    left: -8px !important;
    transform: none !important;
    font-size: var(--font-size-s) !important;
    mat-label{
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .material-symbols-rounded{
      font-size: var(--font-size-m);
    }
    .optional{
      color: var(--color-on-surface-neutral-secondary);
      font-size: var(--font-size-caption);
    }
    i, .material-symbols-rounded{
      cursor: pointer;
    }
  }
  .mat-mdc-form-field-required-marker{
    display: none;
  }
  .mdc-text-field--filled .mdc-floating-label--float-above{
    transform: none !important;
  }
  .mat-mdc-form-field-flex,
  .mat-mdc-form-field-infix,
  .mdc-text-field__input{
  }
  label,
  .mdc-text-field__input{
    font-size: var(--font-size-m) !important;
  }
  .mdc-line-ripple,
  .mat-mdc-form-field-subscript-wrapper{
    display: none;
  }
  &.mat-form-field-invalid{
    .mat-mdc-form-field-flex{
      border: 1px solid var(--color-on-surface-danger-primary);
    }
    .mat-mdc-form-field-subscript-wrapper{
      display: block;
    }
  }
  .mat-mdc-form-field-error-wrapper{
    padding: 0;
    font-size: var(--font-size-caption);
    color: var(--color-on-surface-danger-primary);
  }
  .mat-mdc-form-field-bottom-align::before{
    height: 14px;
  }
  .mat-mdc-form-field-icon-prefix,
  .mat-mdc-form-field-icon-suffix {
    color: var(--color-on-surface-neutral-secondary);
    i, .material-symbols-rounded{
      font-size: 20px;
    }
  }
  .mat-mdc-form-field-icon-prefix{
    padding: 0 4px 0 0;
  }
  .mat-mdc-form-field-icon-suffix{
    padding: 0 0 0 4px;
  }
  .mat-mdc-form-field-icon-prefix ~ .mat-mdc-form-field-infix{
    .mdc-floating-label{
      left: -34px !important;
    }
  }
  &.mat-form-field-disabled{
    .mat-mdc-form-field-flex{
      border: 1px solid var(--color-on-surface-neutral-disabled);
      background-color: var(--color-surface-neutral-disabled);
    }
    mat-label,
    .mdc-text-field__input{
      color: var(--color-on-surface-neutral-disabled) !important;
    }
    .mat-mdc-form-field-icon-prefix,
    .mat-mdc-form-field-icon-suffix {
      color: var(--color-on-surface-neutral-disabled) !important;
    }
  }
  .mat-mdc-form-field-textarea-control{
    min-height: 60px !important;
  }
  .mat-mdc-form-field-hint-end,
  .mat-mdc-form-field-hint{
    font-size: var(--font-size-caption);
    color: var(--color-on-surface-neutral-secondary);
  }
  .mat-mdc-form-field-hint-wrapper{
    padding: 0;
  }
  .mat-mdc-form-field-subscript-wrapper{
    margin-bottom: -7px;
  }

}

mat-form-field.mat-form-field-disabled input::placeholder{
  color: var(--color-on-surface-neutral-disabled) !important;
}
mat-form-field.mat-form-field-disabled input::-moz-placeholder{
  color: var(--color-on-surface-neutral-disabled) !important;
}
mat-form-field.mat-form-field-disabled input::-moz-placeholder{
  color: var(--color-on-surface-neutral-disabled) !important;
}
mat-form-field.mat-form-field-disabled input:-ms-input-placeholder{
  color: var(--color-on-surface-neutral-disabled) !important;
}
mat-form-field.mat-form-field-disabled input::-ms-input-placeholder{
  color: var(--color-on-surface-neutral-disabled) !important;
}

/* Datepicker */

.mat-datepicker-popup{
  position: absolute;
  background-color: var(--color-surface-neutral-idle);
  box-shadow: var(--elevation-low);
  border-radius: var(--border-radius-interface) !important;
}

mat-date-range-input{
  margin-top: 2px;
}

mat-datepicker-toggle{
  .mat-mdc-icon-button{
      height: 24px;
      width: 24px;
    padding: 0;
  }
}
.mat-calendar{
  padding: 16px 8px;
  width: 268px !important;
  height: 342px !important;
  .mat-calendar-content{
    padding: 0;
  }
  mat-multi-year-view,
  mat-year-view{
    button,
    .mat-calendar-body td{
      width: auto !important;
      left: 7px;
      top: 3px;
    }
    .mat-calendar-body-cell-content{
      text-transform: lowercase;
    }
    .mat-calendar-body-cell-content {
      width: auto !important;
    }
    .mat-calendar-body-cell-content::first-letter{
      text-transform: uppercase !important;
    }
  }
  .mat-calendar-header{
    padding: 0 0 16px 0;
    .mat-calendar-controls{
      margin: 0;
    }
    .mdc-button,
    .mdc-icon-button{
      height: 24px !important;
    }
    .mdc-icon-button{
      width: 24px;
      padding: 0 !important;
    }
    .mat-calendar-next-button{
      margin-left: 6px;
    }
    .mat-calendar-previous-button:after,
    .mat-calendar-next-button:after{
      display: none;
    }
    .mat-calendar-previous-button,
    .mat-calendar-next-button{
      border-radius: var(--border-radius-button);
    }
    .mat-calendar-previous-button:hover,
    .mat-calendar-next-button:hover{
     background-color: var(--color-surface-brand-hover);
      &:before{
        color: var(--color-on-surface-alt-primary);
      }
    }
    .mat-calendar-previous-button:active,
    .mat-calendar-next-button:active{
      background-color: var(--color-surface-brand-press);
      &:before{
        color: var(--color-on-surface-alt-primary);
      }
    }
    .mat-calendar-previous-button:before,
    .mat-calendar-next-button:before{
      font-family: 'metron-icons' !important;
      speak: never;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 16px;
      position: absolute;
      top: 4px;
      left: 4px;
    }
    .mat-calendar-previous-button:before{
      content: "\e9b0";
    }
    .mat-calendar-next-button:before{
      content: "\e9ab";
    }
    .mat-calendar-period-button{
      text-transform: lowercase;
    }
    .mat-calendar-period-button span::first-letter{
      text-transform: uppercase !important;
    }
    .mat-calendar-period-button .mat-calendar-arrow{
      display: none;
    }
    .mat-calendar-period-button:after{
      font-family: 'metron-icons' !important;
      speak: never;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 16px;
      content: "\e9b1";
      margin-left: 4px;
      margin-right: -4px;
    }
  }
  .mat-calendar-table-header{
    th{
      font-weight: var(--font-weight-700);
      span{
        font-size: var(--font-size-m) !important;
      }
    }
  }
  .mat-calendar-body-label{
    opacity: 0;
  }
  tr[aria-hidden=true]{
    display: none;
  }
  .mat-calendar-body{
    td{
      width: 36px !important;
      height: 40px;
      padding: 0 !important;
    }
    tr{
      margin-bottom: 4px;
    }
  }
  button.mat-calendar-body-cell{
    width: 36px;
    height: 36px;
    &:active{
      .mat-calendar-body-cell-content{
        background-color: var(--color-surface-neutral-press);
      }
    }
    &:hover{
      .mat-calendar-body-cell-content{
        background-color: var(--color-surface-neutral-hover) !important;
      }
    }
    .mat-calendar-body-today{
      font-weight: var(--font-weight-700);
      color: var(--color-on-surface-brand-primary) !important;
    }
    &.mat-calendar-body-active[aria-pressed="true"]{
      .mat-calendar-body-cell-content{
        color: var(--color-on-surface-alt-primary) !important;
        background-color: var(--color-surface-brand-idle) !important;
      }
      &:hover{
        .mat-calendar-body-cell-content{
          background-color: var(--color-surface-brand-hover) !important;
        }
      }
      &:active{
        .mat-calendar-body-cell-content{
          background-color: var(--color-surface-brand-press) !important;
        }
      }
    }
    .mat-calendar-body-cell-content{
      border: none;
      font-size: var(--font-sizes-medium) !important;
      width: 36px;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: var(--border-radius-button);
      position: relative;
    }
    &.mat-calendar-body-range-start{
      background-color: var(--color-surface-brand-idle);
      border-bottom-left-radius: var(--border-radius-button) !important;
      border-top-left-radius: var(--border-radius-button) !important;
      .mat-calendar-body-cell-content{
        color: var(--color-on-surface-alt-primary) !important;
      }
      &:hover{
        .mat-calendar-body-cell-content{
          border-bottom-right-radius: 0 !important;
          border-top-right-radius: 0 !important;
        }
      }
    }
    &.mat-calendar-body-in-range{
      border-top: 1px solid var(--color-surface-brand-idle);
      border-bottom: 1px solid var(--color-surface-brand-idle);
      &:hover{
        background-color: var(--color-surface-neutral-hover) !important;
      }
      &:active{
        background-color: var(--color-surface-neutral-press) !important;
      }
    }
    &.mat-calendar-body-range-end{
      background-color: var(--color-surface-brand-idle) !important;
      border-bottom-right-radius: var(--border-radius-button) !important;
      border-top-right-radius: var(--border-radius-button) !important;
      .mat-calendar-body-cell-content{
        color: var(--color-on-surface-alt-primary) !important;
      }
      &[aria-pressed="true"]{
        background-color: var(--color-surface-brand-idle) !important;
        .mat-calendar-body-cell-content{
          background-color: var(--color-surface-brand-idle) !important;
        }
      }
      &:hover{
        &[aria-pressed="true"]{
          background-color: var(--color-surface-brand-hover) !important;
          .mat-calendar-body-cell-content{
            background-color: var(--color-surface-brand-hover) !important;
          }
        }
      }
    }
    &.mat-calendar-body-in-preview{
      .mat-calendar-body-cell-content{
        background-color: var(--color-surface-neutral-hover) !important;
        border-radius: 0;
      }
    }
  }
}
.mat-calendar-body-cell::before, .mat-calendar-body-cell::after, .mat-calendar-body-cell-preview,
.mat-calendar-body-cell:focus .mat-focus-indicator::before{
  display: none !important;
}

mat-form-field{
  .remove-date{
    position: absolute;
    right: 30px;
    top: 2px;
    cursor: pointer;
  }
}

/* Timepicker */

.ngx-mat-timepicker{
  form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field {
    width: 45px !important;
    max-width: 45px !important;
  }
  .mat-mdc-form-field-subscript-wrapper{
    display: none;
  }
  .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button .mat-icon{
    color: var(--color-surface-brand-idle) !important;
    &:hover{
      color: var(--color-surface-brand-hover) !important;
    }
  }
  .ngx-mat-timepicker-spacer{
    padding: 0 6px;
  }
}

.mat-mdc-form-field-error{
  font-size: var(--font-size-caption);
  color: var(--color-on-surface-danger-primary) !important;
}

.mdc-text-field--outlined .mat-mdc-form-field-infix, .mdc-text-field--no-label .mat-mdc-form-field-infix{
  padding: 0 !important;
}