.component-dropdown-button {
    cursor: pointer;
    padding: var(--button-transition);
    display: grid;
    grid-template-columns: auto auto;
    gap: 15px;
    align-items: center;
    transition: all var(--realvuu-transition);
    font-weight: 500;
    padding: var(--realvuu-button-padding) var(--realvuu-button-padding-large);
    color: var(--realvuu-primary-color);
    /* background-color: var(--realvuu-inverse-color); */
}

.component-dropdown-button:hover {
    color: var(--realvuu-inverse-color);
    background-color: var(--realvuu-primary-color);
}

.component-dropdown-button * {
    pointer-events: none;
}

.component-dropdown-options {
    position: absolute;
    color: var(--realvuu-inverse-color);
    background-color: var(--realvuu-white);
    border-radius: 6px;
    box-shadow: 0 0 6px 0 rgba(var(--realvuu-black-rgb), .25);
    /* text-align: center; */
    visibility: hidden;
    opacity: 0;
    z-index: 10;
}

.component-dropdown-options.top {
    width:100%;
}

.component-dropdown-options.bottom ul {
    overflow-y: auto;
    max-height: calc(var(--app-height) - calc(var(--realvuu-header) + var(--realvuu-footer) + 30px))
}

.component-dropdown-options:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -16px;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid currentColor;
    border-left: 8px solid transparent;
    color: rgba(var(--realvuu-white));
}

.component-dropdown-options.bottom::before {
    left: 30px;
}

.component-dropdown-button[data-direction="top"] + .component-dropdown-options {
    bottom: 0;
}

.component-dropdown-button[data-direction="top"] + .component-dropdown-options:before {
    left: 50%;
    transform: translateX(-50%);
    top: initial;
    bottom: -16px;
    border-top: 8px solid currentColor;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    color: rgba(var(--realvuu-white));
}

.component-dropdown-options ul {
    display: grid;
    overflow: hidden;
    border-radius: 6px;
}

.component-dropdown-options * {
    outline: none;
}

.component-dropdown-options a {
    position: relative;
    padding: var(--realvuu-button-padding-large) var(--realvuu-content-padding-small);
    display: block;
    /* grid-template-columns: auto; */
    /* gap: 15px; */
    font-weight: 500;
    color: var(--realvuu-primary-color);
    transition: 0.075s all ease-in-out;
}

.component-dropdown-options li:not(:last-child) a {
    border-bottom: 1px solid var(--realvuu-grey);
}

.component-dropdown-options a:hover {
    color: var(--realvuu-inverse-color);
    background-color: var(--realvuu-primary-color);
}

.component-dropdown-options li.active a {
    color: var(--realvuu-inverse-color);
    background-color: var(--realvuu-primary-color);
    pointer-events: none;
    cursor: default;
}