.dropdown {
    display: grid;
    width: max-content;

    &__trigger {
        background: var(--color-bg-base);
        border-radius: 4px;
        height: 44px;
        box-sizing: border-box;
        width: max-content;
        padding: 8px;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        transition: 300ms ease background-color;
        border: 1px solid transparent;

        @media (hover: hover) and (pointer: fine) {

            &:hover,
            &_active {
                cursor: pointer;
                background-color: var(--color-bg-plate);
                border-color: var(--color-border-basic);
            }
        }
    }

    &__trigger-icon {
        width: 24px;
        height: 24px;
        fill: var(--color-icon-basic);
        transition: 300ms ease transform;

        &_chevron {
            width: 16px;
            height: 16px;
        }

        &_active-chevron {
            transform: rotate(180deg);
            fill: var(--color-icon-brand);
        }

        &_active-dots {
            fill: var(--color-icon-brand);
        }
    }
}