@import 'variables/gutters';
@import 'functions/rem';

.ui-select {
  display: flex;
  flex-direction: column;

  &--invalid {
    gap: var(--digi--layout--gutter--xs);
  }

  &__select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  &__select {
    appearance: none;
    width: 100%;
    padding: var(--digi--ui--input--padding);
    padding-right: var(--digi--layout--padding--30);
    height: var(--digi--ui--input--height);
    border-width: rem(1);
    cursor: pointer;
    font-size: var(--digi--typography--font-size--m);
    color: var(--digi--typography--color--text);
    background-color: var(--digi--ui--color--background);
    border-color: var(--digi--ui--input--border--color);

    &--invalid {
      border-color: var(--digi--ui--color--border--error);
      background-color: var(--digi--ui--color--background--error);
    }
  }

  &__option {
    font-size: var(--digi--typography--font-size--l);
  }

  &__icon {
    position: absolute;
    right: rem(12);
  }
}
