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

.form {
  .form__element {
    > * + * {
      margin-top: 0.25em;
    }
  }

  .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: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMS4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMzU2LjcgMjEyLjdMMjU2IDMxMy40TDE1NS4zIDIxMi43Yy02LjI1LTYuMjUtMTYuMzgtNi4yNS0yMi42MiAwcy02LjI1IDE2LjM4IDAgMjIuNjJsMTEyIDExMkMyNDcuOCAzNTAuNCAyNTEuOSAzNTIgMjU2IDM1MnM4LjE4OC0xLjU2MiAxMS4zMS00LjY4OGwxMTItMTEyYzYuMjUtNi4yNSA2LjI1LTE2LjM4IDAtMjIuNjJTMzYyLjkgMjA2LjQgMzU2LjcgMjEyLjd6TTI1NiAwQzExNC42IDAgMCAxMTQuNiAwIDI1NnMxMTQuNiAyNTYgMjU2IDI1NnMyNTYtMTE0LjYgMjU2LTI1NlMzOTcuNCAwIDI1NiAwek0yNTYgNDgwYy0xMjMuNSAwLTIyNC0xMDAuNS0yMjQtMjI0czEwMC41LTIyNCAyMjQtMjI0czIyNCAxMDAuNSAyMjQgMjI0UzM3OS41IDQ4MCAyNTYgNDgweiIvPjwvc3ZnPg==");
      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;
    }
  }
}
