/* =========================================================
   OBS DESIGN SYSTEM
   Select Component
   ========================================================= */

.obs-select-wrapper {
    position: relative;
}

.obs-select {
    width: 100%;
    min-height: var(--obs-control-height-lg);

    padding:
        var(--obs-space-3)
        calc(
            var(--obs-space-4) +
            var(--obs-icon-size-md) +
            var(--obs-space-2)
        );

    padding-left: var(--obs-space-4);

    color: var(--obs-input-text);
    background: var(--obs-input-bg);

    border:
        var(--obs-border-width-thin)
        solid
        var(--obs-border-primary);

    border-radius: var(--obs-radius-lg);

    font-family: inherit;
    font-size: var(--obs-font-size-md);
    line-height: var(--obs-line-height-normal);

    outline: none;
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    transition:
        background var(--obs-transition-fast),
        border-color var(--obs-transition-fast),
        box-shadow var(--obs-transition-fast),
        color var(--obs-transition-fast);
}

.obs-select:hover {
    border-color: var(--obs-border-hover);
}

.obs-select:focus {
    background: var(--obs-input-bg-focus);
    border-color: var(--obs-primary);
    box-shadow: var(--obs-focus-ring);
}

.obs-select:disabled {
    color: var(--obs-text-disabled);
    background: var(--obs-input-bg-disabled);

    cursor: not-allowed;
    opacity: 0.7;
}

/* =========================================================
   LABEL
   ========================================================= */

.obs-select-label {
    position: absolute;

    top: var(--obs-space-2);
    left: calc(
        var(--obs-space-4) +
        var(--obs-icon-size-md) +
        var(--obs-space-3)
    );

    color: var(--obs-text-secondary);

    font-size: var(--obs-font-size-xs);
    line-height: 1;

    pointer-events: none;
}

/* =========================================================
   ICON
   ========================================================= */

.obs-select-icon {
    position: absolute;

    top: 50%;
    left: var(--obs-space-4);

    width: var(--obs-icon-size-md);
    height: var(--obs-icon-size-md);

    color: var(--obs-input-icon);
    opacity: 0.8;

    transform: translateY(-50%);
    pointer-events: none;

    transition:
        color var(--obs-transition-fast),
        opacity var(--obs-transition-fast);
}

.obs-select-wrapper:focus-within .obs-select-icon {
    color: var(--obs-primary);
    opacity: 1;
}

/* =========================================================
   CARET
   ========================================================= */


.obs-select-caret {
    position: absolute;

    top: 50%;
    right: var(--obs-space-4);

    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--obs-icon-size-md);
    height: var(--obs-icon-size-md);

    color: var(--obs-input-icon);
    font-size: var(--obs-font-size-sm);
    line-height: 1;

    transform: translateY(-50%);
    pointer-events: none;

    transition:
        color var(--obs-transition-fast),
        transform var(--obs-transition-fast);
}


.obs-select-wrapper:focus-within .obs-select-caret {
    color: var(--obs-primary);
    transform: translateY(-50%);
}
/* =========================================================
   VALIDATION
   ========================================================= */

.obs-select.is-invalid {
    border-color: var(--obs-danger);
}

.obs-select.is-invalid:focus {
    box-shadow: var(--obs-danger-focus-ring);
}

.obs-select.is-valid {
    border-color: var(--obs-success);
}

.obs-select.is-valid:focus {
    box-shadow: var(--obs-success-focus-ring);
}