@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: #{ site-config.$chevron-down };
      @extend %icon-embed;

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