.cf-dropdown {
    width: var(--cf-dropdown--width, fit-content);

    &:focus, &:focus-visible, &:focus-within {
        --cf-dropdown__box--outline: var(--cf-dropdown--outline-focus, 1px solid black);
        outline: none;
    }

    &[aria-expanded="true"] {
        --cf-dropdown__list--display: block;
    }
}

.cf-dropdown__box {
    border: 1px solid var(--brand-color-border);
    border-radius: var(--brand-border-radius);
    padding: var(--cf-spacing-tiny) var(--cf-spacing-small);
    display: flex;
    align-items: center;
    gap: var(--cf-spacing-small);
    flex-wrap: nowrap;
    cursor: pointer;
    outline: var(--cf-dropdown__box--outline, none);

    &::after {
        content: var(--cf-dropdown__box-after--content, "");
        display: block;
        height: 16px;
        width: 16px;
        background-image: var(--cf-dropdown__box-after--bg, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E"));
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.cf-dropdown__list {
    display: var(--cf-dropdown__list--display, none);
    margin-block-start: var(--cf-spacing-tiny);
    border: 1px solid var(--brand-color-border);
    border-radius: var(--brand-border-radius);
    padding: var(--cf-spacing-tiny) var(--cf-spacing-small);
}

.cf-dropdown__item {
    &.is-active {
        background-color: var(--cf-color-background);
        outline: none;
    }
}