@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/colors";
@use "@naomi-2025/ui-core/focus-visible";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

.form {
  .form__description {
    @extend %text-style-small-copy;

    margin-top: 0.5em;
    color: inherit;
  }

  .form__element:has(:focus-visible):not(.form__element--actions) {
    --focus-visible--outline-color: var(--highlight-color);
    @extend %focus-visible;
  }

  .form__select-wrapper {
    position: relative;

    select {
      padding-right: calc(#{ (s360-scss-toolkit.modular-scale(1) * 3) + px });
    }

    &::after {
      top: 50%;
      right: 0;
      position: absolute;
      pointer-events: none;
    }
  }

  .form__element--input-checkbox,
  .form__element--input-radio {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5em;
    align-items: center;

    &:not(:last-child) {
      margin-bottom: 0.5em;
    }
  }

  // Class from recaptcha module.
  .recaptcha-no-badge-message {
    display: none;
  }
}
