/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '@material/theme/theme' as mdc-theme;
@use '@material/typography/typography' as mdc-typography;
@use '../theme';

@mixin core-styles() {
  .forge-quantity-field {
    ::slotted([slot='label']) {
      @include label();
    }

    ::slotted([slot='helper-text']) {
      @include helper-text();
    }

    &__row {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    ::slotted(forge-icon-button:first-of-type) {
      // If the forge-icon-button is slotted, add our desired color and margin
      @include decrement-button();
    }

    ::slotted(forge-icon-button:last-of-type) {
      // If the forge-icon-button is slotted, add our desired color and margin
      @include increment-button();
    }

    ::slotted(forge-text-field) {
      // If the forge-text-field is slotted, remove its excess top and bottom margin
      --forge-text-field-margin-top: 0;
      --forge-text-field-margin-bottom: 0;
    }

    &--required {
      ::slotted([slot='label']) {
        @include required-label();
      }
    }

    &--invalid {
      ::slotted([slot='label']) {
        @include label-invalid();
      }

      ::slotted([slot='helper-text']) {
        @include helper-text-invalid();
      }
    }
  }
}

// Label

@mixin label-base() {
  @include mdc-typography.typography(caption);
}

@mixin label() {
  @include label-base();
  @include theme.property(color, text-secondary-on-background);
}

@mixin label-invalid() {
  @include label-base();
  @include mdc-theme.property(color, error);
}

@mixin required-label() {
  &::before {
    @include mdc-theme.property(color, error);
    content: '*';
    margin-right: 4px;
  }
}

// Helper text

@mixin helper-text-base() {
  @include mdc-typography.typography(caption);
  @include mdc-typography.baseline-top(16px);
  height: 1rem;
}

@mixin helper-text() {
  @include helper-text-base();
  @include theme.property(color, text-secondary-on-background);
}

@mixin helper-text-invalid() {
  @include helper-text-base();
  @include mdc-theme.property(color, error);
}

// Icon buttons

@mixin icon-button() {
  color: var(--mdc-theme-text-secondary-on-light);
}

@mixin decrement-button() {
  @include icon-button();
  margin-right: 4px;
}

@mixin increment-button() {
  @include icon-button();
  margin-left: 4px;
}
