.input-card {
  overflow: visible;
  border: 1px solid var(--color--border-low-contrast);

  > :where(.input-card__row, .input-card__actions) + :where(.input-card__row, .input-card__actions) {
    border-top: 1px solid var(--color--border-low-contrast);
  }

  &:focus-within {
    border-color: var(--color--border-mid-contrast);

    > :where(.input-card__row, .input-card__actions) + :where(.input-card__row, .input-card__actions) {
      border-top-color: var(--color--border-mid-contrast);
    }

    .input-card__cell + .input-card__cell {
      border-left-color: var(--color--border-mid-contrast);
    }
  }
}

.input-card__row--split {
  display: flex;
}

.input-card__cell {
  display: flex;
  flex: 1 1 50%;
  min-width: 0;
  min-block-size: var(--input-height);

  + .input-card__cell {
    border-left: 1px solid var(--color--border-low-contrast);
  }
}

.input-card__control {
  display: block;
  width: 100%;
  min-width: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;

  &:where(label:has(input[type="checkbox"], input[type="radio"])) {
    min-block-size: var(--input-height);
    padding-inline: var(--input-padding);
    padding-block: 0;
  }

  &:is(input, select, textarea, lexxy-editor):focus {
    outline: none;
  }

  &:focus-within,
  &:is(input, select, textarea, lexxy-editor):focus {
    background-color: var(--color--bg-max);
    box-shadow: inset 2px 0 var(--color--border-mid-contrast);
    outline: none;
    [data-theme="dark"] & { background-color: var(--color--bg-2); }
  }
}

lexxy-editor.input-card__control {
  &:focus-within {
    [data-theme="dark"] & { background-color: var(--color--bg-1); }
  }
}

.input-card__actions {
  display: flex;

  > button,
  > input[type="submit"] {
    width: 100%;
    padding: var(--input-padding);
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--color--primary-base);
    text-transform: uppercase;

    &:hover {
      color: var(--color--bg-max);
      background-color: var(--color--primary-base);
    }
  }

  > button.critical,
  > input[type="submit"].critical {
    color: var(--color--aaa-text-critical);

    &:hover {
      color: var(--color--bg-max);
      background-color: var(--color--aaa-text-critical);
    }
  }
}