:root {
    --dropdown-more-margin-top: 10px;
    --dropdown-more-arrow-size: 6px;
    --dropdown-more-transition-duration: 0.3s;
    --dropdown-list-item-font-size: 14px;
    --dropdown-list-item-line-height: 22px;
}

.dropdown-list__item--extra {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition:
        max-height var(--dropdown-more-transition-duration) ease,
        opacity var(--dropdown-more-transition-duration) ease,
        padding-top var(--dropdown-more-transition-duration) ease;
}

.dropdown-list--truncated:not(.dropdown-list--expanded) .dropdown-list__item--extra {
    padding-top: 0 !important;
}

.dropdown-list--truncated.dropdown-list--expanded .dropdown-list__item--extra {
    max-height: calc(var(--dropdown-list-item-line-height) + 6px);
    opacity: 1;
    pointer-events: auto;
}

.dropdown__more {
    margin-top: var(--dropdown-more-margin-top);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-category-pink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: var(--dropdown-list-item-font-size);
    line-height: var(--dropdown-list-item-line-height);
}

.dropdown__more-arrow {
    display: inline-block;
    width: var(--dropdown-more-arrow-size);
    height: var(--dropdown-more-arrow-size);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--dropdown-more-transition-duration) ease;
}

.dropdown__more--expanded .dropdown__more-arrow {
    transform: rotate(135deg);
}