@use './variables';
@use './_utils' as utils;

@mixin focus-state($outline-offset: 2px) {
  &:not(.focus-hide) {
    outline: -webkit-focus-ring-color auto 1px;
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
    outline-width: 1px;
    outline-offset: $outline-offset;
  }
}

@mixin reset-button-space {
  cvs-confirmation-button + cvs-confirmation-button,
  cvs-confirmation-button + cvs-button,
  cvs-confirmation-button + button,
  cvs-button + cvs-button,
  cvs-button + button,
  cvs-button + cvs-confirmation-button,
  button + button,
  button + cvs-button,
  button + cvs-confirmation-button {
    margin-left: unset !important;
  }
}

@mixin pds-form-field-base($suffix-color: #262626) {

  .mat-icon-button {
  color: $suffix-color;
  }

  .mat-form-field-subscript-wrapper {
    overflow: visible;
  }
}

@mixin pds-form-field-color($color: variables.$gray-6) {
  .mat-label,
  .mat-hint,
  .mat-form-field-label {
    color: variables.$gray-6;
  }

  .mat-form-field-outline {
    color: $color;
  }

  .mat-input-element {
    color: variables.$gray-8;
    caret-color: $color;

    &::placeholder {
      color: variables.$gray-6;
    }

    &:disabled {
      color: $color;
    }
  }

  .mat-form-field-ripple {
    background-color: $color;
  }

  &.mat-form-field-invalid {
    .mat-label,
    .mat-hint,
    .mat-form-field-label {
      color: $color;
    }
  }

  &.mat-form-field-disabled {
    .mat-form-field-suffix, .mat-form-field-prefix {
      .mat-icon {
        color: $color;
      }
    }
  }

  &:not(.mat-form-field-disabled) {
    .mat-form-field-suffix, .mat-form-field-prefix {
      .mat-icon {
        color: (variables.$gray-x-dark);
      }
    }
  }
}

@mixin pds-form-field-size($caption: variables.$font-size-5) {
  mat-label {
    display: inline-block;
    font-weight: variables.$font-weight-normal;
    padding-right: utils.rem-calc(5px);
    background-color: variables.$white;
  }

    .mat-hint {
      display: flex;
      align-items: center;
      font-size: $caption;

      .mat-icon {
        align-self: flex-start;
        margin-right: 4px;
        height:16px;
        width:16px;
        flex-shrink:0;
      }
    }

    .mat-error {
      display: flex;
      align-items: center;
      font-size: $caption;

      .mat-icon {
        align-self: flex-start;
        margin-right: 4px;
        height:16px;
        width:16px;
        flex-shrink:0;
      }
    }

  .mat-form-field-prefix, .mat-form-field-suffix {
    .mat-icon {
      width: utils.rem-calc(24px) !important;
    }
  }

  .mat-form-field-suffix {
    .mat-icon.autocomplete-wrapper__icon {
      height: utils.rem-calc(16px) !important;
      width: utils.rem-calc(16px) !important;
    }
  }
}

@mixin pds-form-field-float-label($mat-label-scale: 0.855, $mat-label-position-x: 0, $mat-label-position-y: -24px, $mat-label-position-perspective: utils.rem-calc(100px) ) {
  &.mat-form-field-can-float {
    &.mat-form-field-should-float .mat-form-field-label,
    .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
      transform: translateX(utils.rem-calc($mat-label-position-x)) translateY(utils.rem-calc($mat-label-position-y)) scale($mat-label-scale)
      perspective($mat-label-position-perspective) translateZ(utils.rem-calc(0.001px));
    }

    .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
    .mat-form-field-label {
      transform: translateY(utils.rem-calc(-18px)) scale($mat-label-scale)
      perspective(utils.rem-calc(100px)) translateZ(utils.rem-calc(0.001px));
    }
  }
}


@mixin pds-compact-form-field() {

  &.mat-form-field-appearance-outline, .mat-form-field-appearance-outline {

    &.pds-date-picker-compact{
      .mat-form-field-wrapper {
        .mat-form-field-flex {
          .mat-form-field-suffix {
            top: 0;
          }
        }
      }

    }

    &.mat-form-field-has-label {
      margin-top: utils.rem-calc(8px);
    }

    .mat-form-field-wrapper {
      .mat-form-field-subscript-wrapper {
        padding-left: 0;
        margin-top: utils.rem-calc(4px);
      }

      .mat-form-field-flex {
        padding-right: utils.rem-calc(4px);

        .mat-form-field-infix {
          padding-top: utils.rem-calc(10px);

          .mat-select {
            .mat-select-trigger {
              .mat-select-arrow-wrapper {
                transform: translateY(0);
              }
            }
          }
        }

        .mat-form-field-suffix {
          top: utils.rem-calc(6px);
        }
      }
    }

    .mat-form-field-infix {
      padding: 11px 0 7px 0;
      border-top: none;

      .mat-form-field-label-wrapper {
        transform: translateX(-10px);
        overflow: visible;

        .mat-form-field-label {

          transform: translateY(-24px) scale(0.855) perspective(utils.rem-calc(100px)) translateZ(utils.rem-calc(0.001px));

          .mat-label {
            background-color: transparent;
          }
        }
      }
    }

    .mat-form-field-suffix {
      position: absolute;
      right: 8px;
      top: 0;

      .mat-icon-button, .cvs-icon-only-btn {
        width: 24px;
        height: 24px;

        .mat-icon {
          padding: 0;
        }
      }
    }

    &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap {
      border-top-color: currentColor;
    }

    &.pds-read-only-field {
        .mat-form-field-wrapper {
          .mat-form-field-flex {
            padding-left: 0;

            .mat-form-field-label {
              transform: translateY(-24px) translateX(10px) scale(0.855)  perspective(utils.rem-calc(100px)) translateZ(utils.rem-calc(0.001px))
            }
          }
        }
    }
  }
}

@mixin pds-outline-form-field() {

  &.pds-form-field-prefix {
    .mat-form-field-prefix, .mat-form-field-suffix {
      &:has(span) {
        top: 0;
      }
    }
  }


    &:not(.mat-form-field-disabled) {
      .mat-form-field-outline {
        background-color: white;
        border-radius: 7px;
      }
    }
}