@use "core/site-config";
@use "s360-toolkit";

.form {
  .form__label--required {
    &::after {
      content: '\002A';
      color: #EF0909;
      margin-left: 0.25em;
    }
  }

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

  .form__select-wrapper {
    position: relative;

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

    &::after {
      content: '';
      background-color: currentColor;
      mask-image: site-config.$circle-chevron-down;
      mask-repeat: no-repeat;
      mask-position: center;
      font-size: s360-toolkit.font-size-ms(1);
      top: 50%;
      transform: translateY(-50%);
      right: 1em;
      position: absolute;
      pointer-events: none;
      width: 1em;
      height: 1em;
    }
  }
}
