@use "@s360-base-theme/ui-core/site-config";
@use "@s360-base-theme/ui-core/colors";
@use "@s360-base-theme/ui-core/icon-embed";
@use "s360-scss-toolkit";

.form {
  .form__description {
    margin-top: 0.25em;
    color: inherit;
  }

  .form__element:has(:focus-visible):not(.form__element--actions) {
    outline: 5px solid colors.$black;
    outline-offset: 4px;
  }

  .form__select-wrapper {
    position: relative;

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

    &::after {
      --icon-embed--bg-color: var(--text--color);
      --icon-embed--translate: 0 -50%;
      --icon-embed--mask-image: '';
      @extend %icon-embed;

      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;

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