:root {
    --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard);
    --box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    --outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard);
    --disabled: var(--telekom-color-text-and-icon-disabled);
}

.steam-select {
    width: 100%;
    padding: .2rem 0;
    margin-left: 5px;
    color: black;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-align: start;
    position: relative;

    &.disabled {
        cursor: not-allowed;
        color: var(--disabled);
    }

    .label {
        height: 0;
        top: .2rem;
        left: calc(.75rem + 1px);
        position: relative;
        width: fit-content;
        font-size: 0.75rem;
    }

    .select-container {
        width: 100%;
        padding: var(--telekom-spacing-composition-space-03) var(--telekom-spacing-composition-space-05);
        outline-color: var(--telekom-color-functional-focus-standard);
        border: var(--telekom-spacing-composition-space-01) solid var(--rz-base-400);
        border-radius: var(--telekom-radius-standard);
        appearance: none;
        padding-right: 2rem;
        height: 2.75rem;
        box-sizing: border-box;

        &.disabled {
            cursor: not-allowed;
            color: var(--disabled);
            background: none;
        }

        &:hover:not(.disabled) {
            background-color: var(--telekom-color-ui-state-fill-hovered);
            border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard);
        }

        &:focus:not(.disabled), &:focus-visible:not(.disabled) {
            outline-offset: 1px;
            outline: var(--outline);
        }

        &.labeled {
            padding-top: .75rem;
        }
    }

    .icon {
        top: 50%;
        right: 0.5rem;
        position: absolute;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        pointer-events: none;
    }
}