@use "design";
@use "m";

$duration: 150ms;

// Rounded corner hacks go here
// --------------------------------

:global(.globalRoundedFieldsContainer) {
  .field {
    @include m.cardRowBottomBorder;
  }

  // :first-child > .field selectors are loosey goosey for autocomplete fields

  > .field:first-child,
  > :first-child > .field {
    border-top-left-radius: design.$border-radius-inside-large;
    border-top-right-radius: design.$border-radius-inside-large;

    &:not(.checkboxType):not(.radioGroupType) input {
      border-top-left-radius: design.$border-radius-inside-large;
      border-top-right-radius: design.$border-radius-inside-large;
    }
  }

  > .field:last-child,
  > :last-child > .field {
    border-bottom-left-radius: design.$border-radius-inside-large;
    border-bottom-right-radius: design.$border-radius-inside-large;
    @include m.noCardRowBottomBorder;

    &:not(.checkboxType):not(.radioGroupType) input,
    textarea {
      border-bottom-left-radius: design.$border-radius-inside-large;
      border-bottom-right-radius: design.$border-radius-inside-large;
    }
  }
}

// --------------------------------

// Field is actually everything about the "field", including the error
// messages, which are outside of the label
.field {
  position: relative;

  width: 100%;
  // background-color: design.$color-surface;
  color: design.$color-on-surface;

  &.hasError .labelText {
    color: design.$color-error !important;
  }

  &:focus-within:not(.checkboxType):not(.radioGroupType):not(.dateType) {
    @include m.focusRing;

    // We need this to be just above the other fields for the outline to show
    // when they're all stacked up. We'll see how much this comes back to bite us.
    z-index: 1;

    @include m.noCardRowBottomBorder;
  }

  // This matches the styles for debug buttons in cards.
  .debugIcon {
    position: absolute;
    z-index: 10;
    left: -6px;
    top: 15px;
  }
}

.labeledInput {
  display: flex;
  align-items: center;

  position: relative;

  // I'll have to change some design stuff if we end up keeping this focus state
  // but I can't get away from it because it feels really nice and chunky on mobile

  .prefix {
    user-select: none;
    padding: 0 design.$space-25 0 design.$card-h-padding;
    color: design.$color-on-surface-variant;
  }

  .suffix {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .suffixContent {
    flex-shrink: 0;
    padding: 0 design.$card-h-padding 0 design.$space-25;
  }

  .fieldBody {
    position: relative;
    flex-grow: 1;
  }

  input,
  select,
  textarea {
    display: block;
    width: 100%;

    padding-left: design.$card-h-padding;

    height: 72px;

    .fieldPaddingMinimal & {
      // Leave room for label above.
      height: 50px;
      padding: design.$space-100 design.$space-25 0;
    }

    @include design.font-body;

    // We'll draw our own focus rings, thanks
    &:focus-visible {
      box-shadow: none;
    }
  }

  textarea {
    font-weight: design.$weight-display-light;
  }

  // Scooch value down when there is a label

  &:not(.noLabel) {
    // Types that middle align their value:
    input,
    select {
      padding-top: 20px;
    }

    // Types that top align their value:
    input[type="date" i] {
      padding-top: 38px;

      &::-webkit-date-and-time-value {
        text-align: left;
      }
    }

    // Because textarea content can scroll, the text can end up
    // under the label. Avoid this for now by just bumping the actual
    // field down under the label text.
    textarea {
      margin-top: 40px;
      padding-top: 0;
      padding-right: design.$card-h-padding;
      padding-bottom: design.$card-h-padding;
      max-height: 240px;
    }
  }

  // Fix unlabeled textareas

  textarea {
    padding-top: design.$space-100;
  }

  select {
    // Un-reset some of the select stuff to make them easier to deal with for now
    white-space: nowrap;
    align-items: center;

    // Don't overlap with triangle
    padding-right: calc(design.$card-h-padding + 30px);
  }

  &.disabled {
    opacity: 0.6;
  }

  // Fancy floating label
  // --------------------------------

  .borderedLabel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    padding: 0 design.$card-h-padding;

    .fieldPaddingMinimal & {
      padding: 0;
    }
  }

  .labelText {
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: design.$color-on-surface-variant;
    transition-property: top, transform, font-size, color;
    transition-duration: $duration;
    max-width: 100%;

    user-select: none;
    @include design.font-body;
    // line-height needs to be higher than the default so it doesn't clip,
    // and since this can't wrap there's no reason it can't be generous
    line-height: 25px !important;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  // When it's floating

  &:focus-within .labelText {
    color: design.$color-brand-primary;
  }

  &:focus-within,
  &.hasValue {
    .borderedLabel {
      .labelText {
        top: 12px;

        .fieldPaddingMinimal & {
          top: 0;
        }

        transform: translateY(0);
        @include design.font-smallest;
      }
    }
  }
}

// Radio lists and checkboxes
// --------------------------------

// The actual label and radio fields for radios and checkboxes
.radioGroupFields,
.checkboxField {
  padding: design.$space-100 design.$card-h-padding;

  .fieldPaddingMinimal & {
    padding: 0;
  }
}

.radioGroupFields.lineBetween {
  > label:not(:last-child) {
    border-bottom: 1px solid red;
  }
}

.radioChoice,
.checkboxField {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;

  // Center the *first line* of the label with the checkbox/radio button.
  & > :last-child {
    margin-top: 0.1em;
  }

  .fieldPaddingMinimal & {
    gap: 6px;
  }
}

.radioGroupLabel {
  color: design.$color-on-surface-variant;
}

// This is slightly more action-at-a-distancy than a lot of our other stuff,
// but it doesn't seem that bad to me:

.selectType {
  &.tiny {
    // Tighten up padding
    select {
      padding-right: 10px !important;
    }

    .labelText {
      color: design.$color-on-surface-variant;

      &::after {
        pointer-events: none;
        content: "";
        display: inline-block;
        margin-left: 4px;
        vertical-align: middle;
        margin-top: -2px;
        width: 0;
        height: 0;

        border-style: solid;
        border-width: 6px 3.5px 0 3.5px;

        // Not setting border-top-color forces inherit
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
      }
    }
  }

  &:not(.tiny) {
    .fieldBody::after {
      pointer-events: none;
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8.7px 5px 0 5px;
      position: absolute;
      border-color: design.$color-on-surface-variant transparent transparent transparent;
      right: design.$card-h-padding;
      top: 50%;
      margin-top: -5px;
    }
  }
}

// Validation messages
// --------------------------------

.successMessage,
.errorMessage,
.infoMessage {
  @include design.font-small;

  padding: 0 design.$card-h-padding 5px design.$card-h-padding;

  .fieldPaddingMinimal & {
    padding: 0;
  }
}

.errorMessage {
  color: design.$color-error;
}

.infoMessage {
  color: design.$text-grey;
}

// Date field

.dateType {
  .dayField select,
  .yearField select {
    min-width: 70px;
  }

  // Squish up fields even more
  .selectType:not(:first-child) {
    --card-h-padding: 8px;
  }

  .labeledInput:focus-within {
    @include m.focusRingInside;
  }

  .clearDate {
    display: block;
    align-self: stretch;
    flex-shrink: 0;
    padding: 0 12px;
    cursor: pointer;

    color: design.$color-on-surface-variant;

    transition: 50ms opacity;

    opacity: 0.6;

    &:hover {
      opacity: 0.8;
    }

    &:active {
      opacity: 1;
    }

    // Icon size.
    svg {
      width: 12px;
    }
  }
}

.dateFieldLabel {
  @include design.font-body;
  color: design.$text-grey;
  padding: design.$space-100 design.$card-h-padding 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}