.scrollable-paragraph-wrapper {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 100, 100, 0.4) transparent;
}

/* For webkit browsers */
.scrollable-paragraph-wrapper::-webkit-scrollbar {
    width: 6px;
}
.scrollable-paragraph-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(100, 100, 100, 0.4);
    border-radius: 4px;
}
.scrollable-paragraph-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable-paragraph {
    @apply whitespace-pre-line text-secondary-paragraph;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 6;
    transition: all 0.3s ease;
}

/* When user scrolls, remove clamp */
.scrollable-paragraph-wrapper:focus-within .scrollable-paragraph,
.scrollable-paragraph-wrapper:hover .scrollable-paragraph,
.scrollable-paragraph-wrapper:has(.scrollable-paragraph:active) .scrollable-paragraph {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}


.option {
    padding: 10px 16px;
    font-weight: 400;
    color: var(--color-primary-paragraph);
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.option:hover {
    background-color: #f5f5f5;
}

.option.selected {
    font-weight: 500;
    background-color: #f5f5f5;
}