/* #region Basic dropdown */

.cg-dropdown-container {
    display: flex;
    align-items: center;
    position: relative;
}

.cg-dropdown {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    padding: var(--spacing-2) var(--spacing-3);
    gap: var(--spacing-3);

    background-color: var(--color-brand-green-1-600);
    color: var(--color-white);
    border-radius: var(--border-radius-lg);

    cursor: pointer;
    user-select: none;

    min-width: 15rem;
    width: fit-content;
    height: auto;
}

.cg-dropdown-left {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.cg-dropdown-left i {
    opacity: 0.9;
}

.cg-dropdown-menu-container {
    position: absolute;
    top: calc(100% + var(--spacing-1));
    left: 0;
    z-index: 1000;

    display: none;
    float: left;
    min-width: 10rem;

    padding: var(--spacing-1) var(--spacing-1);

    gap: var(--spacing-3);

    color: var(--color-white);
    background-color: var(--brand-primary-dark);

    border-radius: var(--spacing-3);
    min-width: 15rem;
}

.cg-dropdown-menu {
    display: flex;
    flex-direction: column;
}

/* Dropdown options */
.cg-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);

    padding: var(--spacing-2) var(--spacing-3);
    width: inherit;

    clear: both;
    font-weight: 400;
    text-align: inherit;
    white-space: nowrap;
    border: 0;
    text-decoration: none;

    background-color: var(--color-brand-green-1-500);
    border-radius: var(--spacing-2);
    color: var(--color-white);
}

.cg-dropdown-item:hover {
    background-color: var(--color-brand-green-1-400);
    color: var(--color-white);
    text-decoration: none;
}

/* Dropdown states */
.cg-dropdown:hover {
    background-color: var(--color-brand-green-1-400);
    color: var(--color-white);
}

.cg-dropdown:active {
    background-color: var(--color-brand-green-1-400);
    color: var(--color-white);
}

.cg-dropdown:focus {
    outline: 1px solid var(--brand-focus-border);
    box-shadow: 0 0 0 3px var(--brand-focus-border);
}

/* #endregion Basic dropdown */