.single-select {
    --border-color: var(--apInputBorderColor);
    --color: var(--apInputTextColor);
    --background-color: var(--apInputBgColor);
    --arrow-color: var(--color);
    appearance: none;
    cursor: pointer;

    display: inline-grid;
    grid-template-areas: "select";
    grid-area: select;
    align-items: center;
    position: relative;

    font-family: var(--apFontDefaultFamily);
    font-size: var(--apFontSizeDefault);
    line-height: var(--apLineHeightDefault);
    background-color: var(--background-color);
    color: var(--color);
    border: var(--apBorderWidth) solid var(--border-color);
    border-radius: var(--apBorderRadius);
    transition: 180ms box-shadow ease-in-out;
    box-sizing: border-box;
    margin: var(--apInputMargin);
    outline: none;
    box-shadow: none;
}

.single-select select {
    appearance: none;
    background-color: transparent;
    color: var(--color);
    border: none;
    padding: var(--apInputVPadding) calc(var(--apInputHPadding) * 3)  var(--apInputVPadding) var(--apInputHPadding);
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    z-index: 1;
    border-radius: var(--apBorderRadius);
}
.single-select select:focus {
    outline: none;
}
.single-select:focus-within {
    --border-color: var(--apInputBorderFocusColor);
    --background-color: var(--apInputBgFocusColor);
    --color: var(--apInputTextFocusColor);
}
.single-select select:disabled {
    cursor: not-allowed;
    color: var(--apMutedTextColor);
}


.single-select select,
.single-select::after {
    grid-area: select;
}


/* IE11 hack */
.single-select select::-ms-expand {
    display: none;
}


.single-select::after {
    content: "";
    display: inline-block;
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    margin-right: var(--apInputHPadding);
    background-color: var(--arrow-color);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

.single-select.single-select--block {
    display: grid;
}