@use "../mixins/border-radius" as *;

// scss-docs-start form-field
@layer forms {
  .form-field {
    position: relative;
    display: grid;
    gap: .5rem;
    // width: 100%;

    > label,
    > .form-label {
      justify-self: start;
      margin-bottom: 0;
    }

    &:has(> .check, > .radio, > .switch) {
      grid-template-columns: auto 1fr;
      column-gap: .5rem;
      align-items: start;

      > .check,
      > .radio,
      > .switch {
        grid-column: 1;
      }

      > :not(.check, .radio, .switch) {
        grid-column: 2;
      }

      > .form-label {
        grid-column: 1 / -1;
      }
    }
  }

  .form-field-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .form-field-card {
    position: relative;
    padding: calc(var(--spacer) * .75);
    cursor: pointer;
    border: var(--border-width) solid transparent;
    @include border-radius(var(--radius-7));

    &:hover {
      background-color: var(--bg-1);
    }

    &:has(:checked) {
      background-color: var(--bg-1);
      border-color: var(--border-color);
    }

    label::before {
      position: absolute;
      inset: 0;
      content: "";
    }
  }

  .form-group {
    display: grid;
    gap: .5rem;

    > label,
    > .form-label,
    > legend {
      justify-self: start;
      margin-bottom: 0;
    }
  }
}
// scss-docs-end form-field