@layer atoms {
  .mobius-select__outer {
    box-sizing: border-box;
    width: 100%;

    & > :where(.mobius-label.--is-optional)::after {
      content: " (optional)";
    }
  }

  .mobius-select__wrapper {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
    max-width: var(--select-wrapper-max-width);
  }

  .mobius-select {
    box-sizing: border-box;
    width: 100%;
    padding: var(--input-field-padding);
    padding-right: var(--size-xxl);
    font-family: var(--font-family);
    font-size: var(--font-size-regular);
    color: var(--color-text);
    border: var(--border-default);
    border-radius: var(--input-border-radius);
    background-color: var(--color-background-input);
    outline: 0;
    appearance: none;
    white-space: nowrap;
    text-overflow: ellipsis;

    /* Hack for placeholder option: only works for required */
    & option {
      color: var(--color-text);
    }

    & option[disabled][selected] {
      color: var(--color-text-medium);
    }

    &:invalid {
      color: var(--color-text-medium);
    }

    /* Disabled */
    &.--is-disabled {
      background-color: var(--color-background-light);
      border-color: var(--color-border-medium);
      color: var(--color-text-light);
      cursor: not-allowed;
    }

    /* Focused */
    &:focus-visible {
      border-color: var(--color-primary);
      background-color: var(--color-background-input-active);
      box-shadow: var(--box-shadow-default);
    }

    /* Hovered */
    &:not(.--is-invalid):not(.--is-disabled):hover {
      border-color: var(--color-primary);
      background-color: var(--color-background-input-active);
    }

    /* Invalid */
    &.--is-invalid {
      border-color: var(--color-error);
      background-color: var(--color-error-background);
      color: var(--color-error);
    }
  }

  .mobius-select__icon {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 2px;
    height: 100%;
    width: var(--size-xxl);
    padding: var(--size-md);
    border-radius: var(--radius-1);
    pointer-events: none;
    color: var(--color-primary-light);

    &.--is-disabled {
      color: var(--color-text-light);
    }

    &.--is-invalid {
      color: var(--color-error);
    }
  }
}
