.Wrapper {
  --selector-width: em(40px);
  position: relative;
}

.Label {
  transition: top var(--x-pp-duration-base) var(--x-pp-timing-base);
}

.Label-positionInside {
  position: absolute;
  pointer-events: none;
  inset-block-start: em(5.6px);
  inset-inline-start: em(12px);
  user-select: none;
  max-width: calc(100% - em(26px) - var(--selector-width, em(40px)));

  &.Label-onBackgroundSurfacePrimary {
    --x-pp-default-color-text-subdued: var(
      --x-pp-color-surface-primary-text-subdued
    );
  }

  &.Label-onBackgroundSurfaceSecondary {
    --x-pp-default-color-text-subdued: var(
      --x-pp-color-surface-secondary-text-subdued
    );
  }

  &.Label-onBackgroundSurfaceTertiary {
    --x-pp-default-color-text-subdued: var(
      --x-pp-color-surface-tertiary-text-subdued
    );
  }
}

.Label-positionOutside {
  display: block;
  margin-block-end: var(--x-pp-spacing-tight4x);
}

.Label-isPlaceholder {
  inset-block-start: em(15px);
}

.Select {
  -webkit-tap-highlight-color: transparent;
  border: 0 transparent solid;
  border-radius: var(
    --x-pp-select-border-radius,
    var(--x-pp-control-border-radius, var(--x-pp-global-border-radius))
  );
  font-size: var(--x-pp-typography-size-default);
  line-height: inherit;
  outline: none;
  padding-block: em(21px) em(6px);
  padding-inline: em(12px) var(--selector-width, em(40px));
  min-height: em(47px);
  transition: box-shadow var(--x-pp-duration-base) var(--x-pp-timing-base),
    border var(--x-pp-duration-base) var(--x-pp-timing-base);
  text-transform: var(--x-pp-global-typography-letter-case);
  letter-spacing: var(--x-pp-global-typography-kerning);
  width: 100%;
  white-space: nowrap;

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

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--moz-focusring-color);
  }

  /* Browser hack to remove extra spacing around text in Firefox. Sorry!
   * This hack targets all the Firefox version we support: 24+
   * Source: http://browserhacks.com/#hack-8e9b5504d9fda44ec75169381b3c3157
   */
  @supports (-moz-appearance: meterbar) {
    text-indent: -2px;
  }
}

.Select-labelOutside {
  padding-block-start: em(14px);
  padding-block-end: em(13px);
}

.Select-labelInline {
  min-height: auto;
  padding-block-start: 0;
  padding-block-end: 0;
}

.Select-backgroundTransparent {
  --moz-focusring-color: var(--x-pp-default-color-text-emphasized);
  background-color: transparent;
}

.Select-backgroundSurfacePrimary {
  --moz-focusring-color: var(--x-pp-color-surface-primary-text-emphasized);
  --x-pp-default-color-accent: var(--x-pp-color-surface-primary-accent);
  color: var(--x-pp-color-surface-primary-text-emphasized);
  background-color: var(--x-pp-color-surface-primary);

  & + .Selector {
    border-color: var(--x-pp-color-surface-primary-border);
    color: var(--x-pp-color-surface-primary-text-subdued);
  }

  /* stylelint-disable-next-line selector-max-class */
  & + .Selector.Selector-borderColorEmphasized {
    border-color: var(--x-pp-color-surface-primary-border-emphasized);
  }
}

.Select-backgroundSurfaceSecondary {
  --moz-focusring-color: var(--x-pp-color-surface-secondary-text-emphasized);
  --x-pp-default-color-accent: var(--x-pp-color-surface-secondary-accent);
  color: var(--x-pp-color-surface-secondary-text-emphasized);
  background-color: var(--x-pp-color-surface-secondary);

  & + .Selector {
    border-color: var(--x-pp-color-surface-secondary-border);
    color: var(--x-pp-color-surface-secondary-text-subdued);
  }

  /* stylelint-disable-next-line selector-max-class */
  & + .Selector.Selector-borderColorEmphasized {
    border-color: var(--x-pp-color-surface-secondary-border-emphasized);
  }
}

.Select-backgroundSurfaceTertiary {
  --moz-focusring-color: var(--x-pp-color-surface-tertiary-text-emphasized);
  --x-pp-default-color-accent: var(--x-pp-color-surface-tertiary-accent);
  color: var(--x-pp-color-surface-tertiary-text-emphasized);
  background-color: var(--x-pp-color-surface-tertiary);

  & + .Selector {
    border-color: var(--x-pp-color-surface-tertiary-border);
    color: var(--x-pp-color-surface-tertiary-text-subdued);
  }

  /* stylelint-disable-next-line selector-max-class */
  & + .Selector.Selector-borderColorEmphasized {
    border-color: var(--x-pp-color-surface-tertiary-border-emphasized);
  }
}

.Select-borderNone {
  &.Select-focusBorderFull {
    &:focus {
      box-shadow: 0 0 0 2px var(--x-pp-color-interactive-text);
    }

    /* stylelint-disable selector-max-class, selector-max-specificity */
    &.hasError {
      &,
      &:focus {
        box-shadow: 0 0 0 2px var(--x-pp-color-critical-accent);
      }
    }
    /* stylelint-enable selector-max-class, selector-max-specificity */
  }

  &.Select-focusBorderBlockEnd {
    &:focus {
      box-shadow: 0 2px 0 0 var(--x-pp-color-interactive-text);
    }

    /* stylelint-disable selector-max-class, selector-max-specificity */
    &.hasError {
      &,
      &:focus {
        box-shadow: 0 2px 0 0 var(--x-pp-color-critical-accent);
      }
    }
    /* stylelint-enable selector-max-class, selector-max-specificity */
  }
}

.Select-borderFull {
  border-width: 1px;
  border-color: var(--x-pp-default-color-border);
  padding-inline-start: em(11px);

  &.Select-focusBorderFull {
    &:focus {
      border-color: var(--x-pp-color-interactive-text);
      box-shadow: 0 0 0 1px var(--x-pp-color-interactive-text);
    }

    /* stylelint-disable selector-max-class, selector-max-specificity */
    &.hasError {
      &,
      &:focus {
        border-color: var(--x-pp-color-critical-accent);
        box-shadow: 0 0 0 1px var(--x-pp-color-critical-accent);
      }
    }
    /* stylelint-enable selector-max-class, selector-max-specificity */
  }

  &.Select-focusBorderBlockEnd {
    &:focus {
      border-bottom-color: var(--x-pp-color-interactive-text);
      box-shadow: 0 1px 0 0 var(--x-pp-color-interactive-text);
    }

    /* stylelint-disable selector-max-class, selector-max-specificity */
    &.hasError {
      &,
      &:focus {
        border-bottom-color: var(--x-pp-color-critical-accent);
        box-shadow: 0 1px 0 0 var(--x-pp-color-critical-accent);
      }
    }
    /* stylelint-enable selector-max-class, selector-max-specificity */
  }
}

.Select-borderBlockEnd {
  border-width: 0 0 1px;
  border-color: var(--x-pp-default-color-border);

  &.Select-focusBorderFull {
    &:focus {
      border-color: var(--x-pp-color-interactive-text);
      box-shadow: 1px 0 0 1px var(--x-pp-color-interactive-text),
        -1px 0 0 1px var(--x-pp-color-interactive-text),
        1px -1px 0 1px var(--x-pp-color-interactive-text),
        -1px -1px 0 1px var(--x-pp-color-interactive-text);
    }

    /* stylelint-disable selector-max-class, selector-max-specificity */
    &.hasError {
      &,
      &:focus {
        border-color: var(--x-pp-color-critical-accent);
        box-shadow: 1px 0 0 1px var(--x-pp-color-critical-accent),
          -1px 0 0 1px var(--x-pp-color-critical-accent),
          1px -1px 0 1px var(--x-pp-color-critical-accent),
          -1px -1px 0 1px var(--x-pp-color-critical-accent);
      }
    }
    /* stylelint-enable selector-max-class, selector-max-specificity */
  }

  &.Select-focusBorderBlockEnd {
    &:focus {
      border-color: var(--x-pp-color-interactive-text);
      box-shadow: 0 1px 0 0 var(--x-pp-color-interactive-text);
    }

    /* stylelint-disable selector-max-class, selector-max-specificity */
    &.hasError {
      &,
      &:focus {
        border-color: var(--x-pp-color-critical-accent);
        box-shadow: 0 1px 0 0 var(--x-pp-color-critical-accent);
      }
    }
    /* stylelint-enable selector-max-class, selector-max-specificity */
  }
}

.Select-borderColorEmphasized {
  border-color: var(--x-pp-default-color-border-emphasized);
}

.Select-isDisabled {
  opacity: 0.7;

  & + .Selector {
    opacity: 0.7;
  }

  &.Select-backgroundSurfacePrimary {
    background-color: var(--x-pp-color-surface-primary-disabled);
  }

  &.Select-backgroundSurfaceSecondary {
    background-color: var(--x-pp-color-surface-secondary-disabled);
  }

  &.Select-backgroundSurfaceTertiary {
    background-color: var(--x-pp-color-surface-tertiary-disabled);
  }
}

.Select-isReadOnly {
  opacity: 0.7;

  & + .Selector {
    opacity: 0.7;
  }

  &.Select-backgroundSurfacePrimary {
    background-color: var(--x-pp-color-surface-primary-disabled);
  }

  &.Select-backgroundSurfaceSecondary {
    background-color: var(--x-pp-color-surface-secondary-disabled);
  }

  &.Select-backgroundSurfaceTertiary {
    background-color: var(--x-pp-color-surface-tertiary-disabled);
  }
}

.Selector {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: var(--selector-width, em(40px));
  height: 43%;
  transform: translateY(-50%);
}

.Selector-separated {
  border-inline-start-width: rem(1px);
  border-inline-start-style: solid;
}

.Error-errorIndentationToText {
  padding: 0 em(12px);
}