@use './variables' as variables;

// Layout
@mixin pds-card-base($padding: 16px) {
  padding: $padding;
  border-radius: 4px;
}

@mixin pds-container($padding: 16px) {
  @include pds-card-base($padding);
  border: 1px solid variables.$gray-4;
}

@mixin pds-card($padding: 16px) {
  @include pds-card-base($padding);
  @include pds-shadow;
}

@mixin pds-shadow($shadow-type: variables.$drop-shadow) {
  box-shadow: $shadow-type;
}

// Text Styles
@mixin pds-regular-text($text-color: variables.$gray-8) {
  font-size: 14px;
  color: $text-color;
  margin: 8px 0 12px 0;
  display: flex;
  align-items: center;

  & mat-icon {
    margin-right: 4px;
  }
}

@mixin pds-info-text {
  @include pds-regular-text;

  mat-icon {
    color: variables.$blue-navy;
  }
}

@mixin pds-warn-text {
  @include pds-regular-text;
  color: variables.$orange-dark;
}

@mixin pds-error-text {
  @include pds-regular-text;
  color: variables.$red-med;
}

@mixin selection-color {
  background-color: variables.$blue-med;
}

@mixin pds-read-only-field {
  &.mat-mdc-form-field {
    &.mat-form-field-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-outline {
        color: transparent!important;
      }

      .mat-mdc-input-element:disabled {
        color: black;
      }
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-underline {
        height: 0;
      }
    }
  }
}


// Utility
@mixin flex-row {
  display: flex;
  flex-direction: row;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin flex-row-aligned {
  @include flex-row;
  align-items: center;
}

@mixin pds-form-field-spacing {
  mat-form-field + mat-form-field {
    margin-left: 16px
  }
}

// Resets
@mixin reset-list-styles {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    margin: 0;
    padding: 0;
  }
}

@mixin reset-button-styles {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;

  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
}

@mixin screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

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