@use "uswds-core" as *;
@use "sam-styles/packages/theme/variables" as *;

.sds-form-wrapper {
    @include u-bg("accent-cool-light");
    justify-content: center;
  }
  
  formly-field {
    display: block;
    margin-top: 1.5rem;
  }
  
  formly-form .usa-form-group {
    margin-top: 0 !important;
  }
  
  .single-form-control .usa-input,
  .single-form-control .usa-select,
  .single-form-control .usa-textarea,
  .single-form-control .usa-range {
    margin-top: 0 !important;
  }
  
  sds-filters usa-accordion formly-field:first-child {
    margin-top: 0 !important;
  }
  
  .sds-form.usa-form.usa-form--large {
    @include u-bg("white");
    @include u-padding("105");
    max-width: 50rem;
  
    @media (min-width: 30em) {
      @include u-padding-x(4);
      @include u-margin-y(3);
      -moz-box-shadow: 2px 2px 10px 3px #c9c9c9;
      -webkit-box-shadow: 2px 2px 10px 3px #c9c9c9;
      box-shadow: 2px 2px 10px 3px #c9c9c9;
    }
  
    .usa-legend {
      font-size: 1.75rem;
    }
  
    .sds-form-text {
      max-height: 800px;
      opacity: 1;
    }
  
    .usa-label,
    .usa-input,
    .usa-select {
      max-width: 30rem;
    }
  
    .usa-hint {
      line-height: 1.1;
    }
  
    .sds-form-extension {
      @include u-display("none");
  
      @include at-media("desktop") {
        @include u-display("inline-block");
      }
    }
  
    .sds-form-extension-btn {
      @include u-display("block");
      @include u-margin-y(1);
  
      @include at-media("desktop") {
        @include u-display("none");
      }
    }
  }
  
  .usa-label {
    @include u-font("sans", "xs");
    @include u-text("semibold");
  }
  
  //select
  .usa-select {
    //@include add-background-svg("sam/arrow-down");
    background-size: 0.6rem;
  
    &.usa-select--small {
      @include u-font("sans", "3xs");
      @include u-margin-top(0.5);
      height: 2.1rem;
    }
  }
  
  //soften error styles
  .usa-error-message {
    font-weight: font-weight("medium");
  }
  
  .usa-input--error,
  .usa-input.usa-focus,
  .usa-input.usa-input--success {
    border-width: 0.1rem !important;
  }
  
  .usa-input--disabled {
    color: color("base-darker");
    border-color: color("base-light");
    background-color: color("base-lighter");
  }
  
  .usa-label--disabled {
    color: color("base-light");
  }
  
  .usa-form-group--error {
    @include u-border-left(2px);
    @include u-border-left("error-dark");
    @include u-border-left("solid");
    @include u-margin-top(2rem);
    margin-left: -1.15rem;
  
    input.usa-input {
      @extend .usa-input--error;
    }
  }
  
  // Checkbox and Radio
  .usa-checkbox__label::before,
  .usa-radio__label::before {
    margin-right: 0.5rem;
    box-shadow: 0 0 0 1px color("ink");
  }
  
  .usa-checkbox__label-description,
  .usa-radio__label-description {
    font-size: 85%;
  }
  
  //checkbox
  .usa-checkbox__input[aria-checked="mixed"]+.usa-checkbox__label:before,
  .usa-checkbox__input[aria-checked="mixed"]:disabled+.usa-checkbox__label:before {
    @include u-bg("primary");
    box-shadow: 0 0 0 2px #70e17b;
    background-image: url("#{$sam-image-path}/minus-white.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 0.75rem auto;
  }
  
  .usa-checkbox.text-align-end {
    text-align: end;
  }
  
  //IAE-45479 fix in FF
  @-moz-document url-prefix() {
  
    .usa-checkbox,
    .usa-fieldset {
      position: relative;
    }
  }
  
  //IAE-45479 fix in IE11
  @media all and (-ms-high-contrast: none) {
  
    *::-ms-backdrop,
    .usa-checkbox,
    .usa-fieldset {
      position: relative;
    }
  }
  
  // textarea/input character count
  .usa-character-count {
    max-width: min-content;
  
    .usa-hint {
      display: flex;
      flex-direction: row-reverse;
    }
  
    textarea {
      width: 100%;
      max-width: 100%;
    }
  }
 
  @media (min-width: 400px) {
    .usa-character-count textarea {
      width: 320px;
      max-width: 100%;
    }
  }
  
  //small label variation
  .usa-label.usa-label--sm {
    @include u-font("sans", "3xs");
    @include u-text("semibold");
  }
  
  .usa-checkbox,
  .usa-radio {
    background-color: transparent !important;
  
    &__tooltip{
      display: inline;
    }
  
    .usa-checkbox__input:checked+.usa-checkbox__label,
    .usa-radio__input:checked+.usa-radio__label {
      &::before {
        background-color: #70e17b !important;
      }
    }
  
    .usa-checkbox__input:checked+.usa-checkbox__label {
      &::before {
        box-shadow: 0 0 0 2px #70e17b !important;
      }
    }
  
    .usa-radio__input:checked+.usa-radio__label {
      &::before {
        box-shadow: 0 0 0 2px #70e17b, inset 0 0 0 2px white !important;
      }
    }
  }
  
  .usa-radio {
    &.horizontal {
      display: inline-flex;
      flex-wrap: nowrap;
  
      .horizontal-option {
        display: inline-flex;
        padding-right: 3rem;
        flex-wrap: nowrap;
      }
    }
  }