.Dropdown {
    --bgColor: #fff;
    --maxWidth: 400px;

    position: absolute;
    left: -.2em;

    opacity: 0;
    pointer-events: none;

    transition: all var(--transition-animation-ms);

    top: 50%;

    > div {
        margin-top: var(--base-gap);

        background: var(--bgColor);
        border-radius: var(--border-radius);

        box-shadow: 0 15px 15px hsla(var(--color-base-hue), var(--color-base-saturation), var(--color-base-brightness), 5%);
        border: solid var(--color-base-faintest) 1px;

        display: flex;
        flex-direction: column;
        gap: 0px;

        padding: var(--base-gap);

        color: var(--color-base);

        max-width: min(var(--maxWidth), calc(100vw - 2em));
        box-sizing: border-box;

        width: max-content;
    }

    &.big {
        > div {
            padding: calc(var(--base-gap) * 1.5);
        }
    }

    &:hover > .dropdown,
    &:focus-within > .dropdown{
        opacity: 1;
        pointer-events: all;
        top: 100%;
    }
}