.select-dropdown { position: relative; }
.dropdown-wrapper {
    position: relative;
    width: 100%;
}
.select-dropdown input.dropdown-button {
    width: 100%;
    padding: 8px 32px 8px 16px; /* leave space for arrow */
    cursor: pointer;
    color: var(--secondary);
}
.dropdown-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* click goes to input */
    color: var(--secondary);

    & path {
        fill: var(--secondary);
    }
}
.custom-options {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #fff;
    outline: 1px solid var(--outline);
    max-height: 200px;
    overflow-y: auto;
    padding: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
    gap: 8px;
}
.custom-option { padding: 8px; cursor: pointer; }
.custom-option:hover {
    background: var(--secondary-container);
    border-radius: 4px;
}
.custom-option.selected {
    background: var(--secondary-container);
    color: var(--secondary);
    border-radius: 4px;
    outline: 1px solid var(--secondary);
}

.select-dropdown {
    &:hover {
        background: var(--secondary-container);
    }
}
.select-dropdown.open {
    .custom-options {
        display: flex;
        flex-direction: column;
    }

    .dropdown-arrow {
        top: 50%;
        transform: scaleY(-1) translateY(50%);
    }
}

button.altButton {
    background: var(--tertiary) !important;
    outline: 1px solid var(--tertiary-variant) !important;
    & p, span, label {
        color: var(--tertiary-variant) !important;
    }

    & path {
        fill: var(--tertiary-variant) !important;
    }

    &:hover {
        background: var(--tertiary-variant) !important;
        outline: none !important;
        & p, span, label {
            color: var(--tertiary) !important;
        }

        & path {
            fill: var(--tertiary) !important;
        }
    }
}

button.general-button {
    background: transparent;
    outline: 1px solid var(--secondary);
    & p, span, label {
        color: var(--secondary);
    }
    & path {
        fill: var(--secondary) !important;
    }

    &:hover {
        background: var(--primary);
        outline: none;
        & p, span, label {
            color: white !important;
        }
        & path {
            fill: white !important;
        }
    }
}