.dropdown {
    position: relative;
    flex-grow: 1;
}

.dropdown-trigger {
    align-self: center;

    width: 100%;
    padding: 0.5rem;
    border: var(--bdr-input);
    border-radius: var(--bdr-rounded);

    outline: none;
    box-shadow: var(--shadow-mid);

    transition: var(--transition-easeinout-fast);

    &:hover {
        transform: translateY(-1px);
        border-color: var(--clr-input-border-hover);
        box-shadow: var(--shadow-low);
    }

    &:focus {
        transform: unset;
        border-color: var(--clr-input-border-focused);
        box-shadow: var(--shadow-low);
    }
}

.dropdown-trigger-form-value {
    display: none;
}

.dropdown-items-container {
    scrollbar-width: none;

    position: absolute;
    z-index: 10;
    top: 110%;

    overflow-y: scroll;
    display: flex;
    flex-direction: column;

    width: 100%;
    max-height: 20rem;
    border: var(--bdr-popup-menu);
    border-radius: var(--bdr-rounded);

    background-color: var(--clr-white);

    &[data-hidden] {
        display: none;
    }

    & > button {
        padding: 0.25rem 0.5rem;
        border: none;
        border-bottom: var(--bdr-popup-menu-separator);

        text-align: left;
        white-space: pre-wrap;
    }

    & > button:hover {
        color: var(--clr-btn-text);
        background-color: var(--clr-btn-bg-hover);
    }

    & > button:active {
        color: var(--clr-btn-text);
        background-color: var(--clr-btn-bg-active);
    }

    & > button[data-hidden] {
        display: none;
    }
}