.selectWrapper {
    width: 100%;
    position: relative;
}

.selectWrapper.bordered select {
    padding: 0;
    height: 24px;
    border-color: transparent;
    outline: none;
}

.selectWrapper svg {
    position: absolute;
    right: 10px;
    top: 8px;
    bottom: 8px;
    color: var(--reactist-content-secondary);
}

.selectWrapper select {
    /* position is set so that z-index is acknowledged */
    position: relative;

    /* z-index is set so that the select appears on top of the svg, and picks up all clicks */
    /* since the select is transparent, visually there's no effect. */
    z-index: 1;

    --tmp-desired-height: 32px;
    --tmp-line-height-increase: 4px;
    --tmp-vertical-padding: calc(
        (
                var(--tmp-desired-height) - var(--reactist-font-size-body) -
                    var(--tmp-line-height-increase)
            ) / 2
    );
    padding: var(--tmp-vertical-padding) 10px;
    padding-right: 30px; /* to make room for the absolutely positioned chevron icon */

    appearance: none;
    box-sizing: border-box;
    width: 100%;
    color: var(--reactist-content-primary);
    background: none;
    border-radius: var(--reactist-border-radius-small);
    border: 1px solid var(--reactist-inputs-idle);
    margin: 0;
}

.selectWrapper:not(.bordered).error select {
    border-color: var(--reactist-inputs-alert) !important;
}

.selectWrapper:not(.bordered) option {
    background-color: var(--reactist-bg-aside);
}

.selectWrapper:not(.bordered) select:hover {
    border-color: var(--reactist-inputs-hover);
}

.selectWrapper:not(.bordered) select:focus {
    border-color: var(--reactist-inputs-focus);
}
