@import '../override-function';

// RadioButtons Component
legend.legend-label + .form-radio-buttons {
  margin-top: scale-rem(1.2rem);
}

.form-radio-buttons {
  label {
    margin-top: 12px;

    // Make links in radio button labels clickable
    a {
      position: relative;
    }
  }

  [type="radio"] {
    height: scale-rem(4.8rem) !important;
    margin: 0;
    border: 0;
    cursor: pointer;
  }

  .errorable-radio-button {
    label {
      outline: none;
      padding: scale-rem(1.2rem);
      display: inline-block;
      margin: scale-rule(0 0 0 1.2rem);
    }

    input:focus {
      &+label {
        background: #ffe396;
      }
    }
  }
}

.form-required-span {
  color: $color-secondary-dark;
  margin: 0 0.35em;
}


button.form-button-green {
  background: $color-green;
}

button.form-button-disabled {
  pointer-events: none;
}

.form-datefield-month,
.form-datefield-day {
  clear: none;
  float: left;
  margin-right: scale-rem(1.5rem);

  & select {
    padding-top: scale-rem(0.85rem);
    padding-bottom: scale-rem(0.85rem);
  }
}

.form-alert-body {
  padding: scale-rule(0 3.5rem);
}

.form-datefield-month {
  width: scale-rem(13rem);
}

.form-datefield-day {
  width: scale-rem(8rem);
}

.form-radio-buttons {
  > input[type="radio"] + label::before {
    display: block;
    float: left;
    margin-left: -1.7em;
    margin-top: 0.25em;
    margin-right: 0;
    pointer-events: none;
  }
  > input[type="radio"] + label {
    margin-left: 1.8em;
  }
  > input[type='radio'] {
    cursor: pointer;
  }
}

.form-required-span {
  color: $color-secondary-dark;
  margin: 0 0.35em;
}

.form-checkbox {
  // There's a too-broad type selector in USWDS that causes checkbox
  // inputs to have a ridiculously wide, yet invisible click area in some browsers.
  // See 18F/web-design-standards#1490
  // This fixes things in the meantime.
  [type="checkbox"] {
    height: scale-rem(1.8rem) !important;
    margin: 0;
    width: scale-rem(1.8rem) !important;
    cursor: pointer;
  }
  > input[type="checkbox"] + label::before {
    display: block;
    float: left;
    margin-left: -1.7em;
    margin-top: 0.14em;
    margin-right: 0;
    pointer-events: none;
  }
  > input[type="checkbox"] + label {
    margin-left: 1.7em;
  }
}

// Checkbox Group Component
legend.legend-label + .form-checkbox-buttons {
  margin-top: scale-rem(1.2rem);
}

.form-checkbox-buttons {
  [type="checkbox"] {
    height: scale-rem(1.8rem) !important;
    width: scale-rem(1.8rem) !important;
    cursor: pointer;
    margin: scale-rule(1.2rem 0 0 2.4rem);
  }

  label {
    padding: scale-rem(1.2rem);
    display: inline-block;
    margin: scale-rule(0 0 0 1.2rem);
  }
}

.form-field-alert label {
  margin-top: 0.5em;
}

.form-error-date {
  margin-top: 0;
}

// override width set to calc(100% + 1.9rem) for dates
.usa-input-error.form-error-date {
  input, select {
    width: 100%;
  }
}

@include media($medium-large-screen) {
  .form-select-medium {
    max-width: scale-rem(12rem);
  }
}

.form-expanding-group-active-radio {
  margin-left: 28px;
}

.form-expanding-group-active-radio.form-expanding-group-inner-enter,
  .form-expanding-group-active-radio.form-expanding-group-inner-leave-active {
	margin-top: -16px;
}

.form-expanding-group-inner-leave {
  max-height: 800px;
  opacity: 1;
  margin-top: 0;
}

.form-expanding-group-inner-enter {
  opacity: 0;
  max-height: 0;
}

.form-expanding-group-inner-leave.form-expanding-group-inner-leave-active {
  -webkit-transition: margin-top 500ms 0ms, max-height 300ms 0ms, opacity 300ms 0ms;
  transition: margin-top 500ms 0ms, max-height 300ms 0ms, opacity 300ms 0ms;
  max-height: 0;
  opacity: 0;
}

.form-expanding-group-inner-enter.form-expanding-group-inner-enter-active {
  -webkit-transition: margin-top 300ms 0ms, max-height 700ms 0ms, opacity 500ms 200ms;
  transition: margin-top 300ms 0ms, max-height 700ms 0ms, opacity 500ms 200ms;
  max-height: 800px;
  opacity: 1;
  margin-top: 0 !important;
}

.form-expanding-group > span {
  .usa-input-error {
    padding-left: scale-rule(calc(1.5rem - 6px));
    right: scale-rule(calc(1.9rem - 6px));
  }
  .schemaform-expandUnder-indent {
    .usa-input-error {
      padding-left: scale-rem(1.5rem);
      right: scale-rem(1.9rem);
    }
  }
}

.form-expanding-group {
  margin-left: scale-rem(-2rem);
  padding-left: scale-rem(2rem);
}

.form-expanding-group-open {
  padding-left: scale-rule(calc(2rem - 7px));
  border-left: 7px solid $color-primary-alt-light;

  // Avoid nested expanding group borders
  .form-expanding-group-open {
    border-left-color: transparent;
  }
}

.form-expanding-group-plus {
  position: relative;
  &::after{
    content: "+";
    font-size: 20px;
    position: absolute;
    right: 0;
    top: 0;
  }
}

.form-expanding-group-open.form-expanding-group-plus::after {
    content: "-";
}

.form-errorable-group {
  > .usa-input-error {
    label {
      margin-top: scale-rem(3rem);
    }
    .usa-input-error-label {
      margin-top: 0;
    }
    .usa-input-error-message {
      margin-bottom: scale-rem(-2rem);
    }
  }
}