/* stylelint-disable no-descending-specificity, selector-max-class, max-nesting-depth */

.root {
  position: relative;
  display: block;

  .arrow {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: var(--padding);
    inset-inline-start: auto;
    pointer-events: none;
    color: var(--arrowColor);
  }

  .select {
    all: initial;
    background: var(--background);
    color: var(--color);
    direction: inherit;
    box-sizing: border-box;
    display: block;
    width: 100%;
    appearance: none;
    border-width: var(--borderWidth);
    border-style: var(--borderStyle);
    border-top-color: var(--borderTopColor);
    border-right-color: var(--borderRightColor); /* stylelint-disable-line property-blacklist */
    border-bottom-color: var(--borderBottomColor);
    border-left-color: var(--borderLeftColor); /* stylelint-disable-line property-blacklist */
    border-radius: var(--borderRadius);
    transition: all 0.2s ease-out;
    outline: 0.1875rem solid transparent;
    outline-offset: -0.5rem;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);

    &::-ms-expand {
      display: none;
    }

    &:focus {
      outline: 0.1875rem solid var(--focusOutlineColor);
      outline-offset: -0.1875rem;
      border-color: var(--focusBorderColor);
    }

    &[aria-invalid] {
      border-color: var(--errorBorderColor);

      &:focus {
        border-color: var(--errorBorderColor);
        outline-color: var(--errorOutlineColor);
      }
    }
  }
}

.disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

.small {
  .select {
    line-height: var(--smallHeight);
    height: var(--smallHeight);
    font-size: var(--smallFontSize);
    padding-top: 0;
    padding-inline-end: calc(var(--padding) * 2 + var(--smallArrowWidth));
    padding-bottom: 0;
    padding-inline-start: var(--padding);
  }

  .arrow {
    font-size: var(--smallArrowWidth);
  }
}

.medium {
  .select {
    line-height: var(--mediumHeight);
    height: var(--mediumHeight);
    font-size: var(--mediumFontSize);
    padding-top: 0;
    padding-inline-end: calc(var(--padding) * 2 + var(--mediumArrowWidth));
    padding-bottom: 0;
    padding-inline-start: var(--padding);
  }

  .arrow {
    font-size: var(--mediumArrowWidth);
  }
}

.large {
  .select {
    line-height: var(--largeHeight);
    height: var(--largeHeight);
    font-size: var(--largeFontSize);
    padding-top: 0;
    padding-inline-end: calc(var(--padding) * 2 + var(--largeArrowWidth));
    padding-bottom: 0;
    padding-inline-start: var(--padding);
  }

  .arrow {
    font-size: var(--largeArrowWidth);
  }
}

/* stylelint-enable no-descending-specificity, selector-max-class, max-nesting-depth */