@import url("colors.css");

.dropdown {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 10vh;
    position: absolute;
    top: 0;
    left: 6rem;
    justify-content: space-between;
    max-width: min-content;
}

.option-color-primary-xd {
    background-color: var(--color-brand-primary-xd);
    color: var(--color-white-xl);
}


.option-with-chevron {
    border: none;
    padding: 1em 1.6em;
    cursor: pointer;
    transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
    user-select: none;
    outline: 2px solid transparent;
    outline-offset: -2px;

    span {
        display: flex;
        gap: .6rem;

        p {
            display: inline;
            margin: 0 auto;
            min-height: 16px;
            text-wrap: nowrap;
        }

        img {
            margin: 0;
            width: 16px;
        }
    }
}


.option-with-chevron:hover {
    background-color: var(--color-brand-primary-xxxxl);
    color: var(--color-black-xd);
}

/* Focus State (The key IBM styling) */
.option-with-chevron:focus {
    outline: 2px solid var(--color-brand-primary-xd);
    outline-offset: -2px;
}

.option-button {
    height: 100%;
    width: max-content;
}

.option-item {
    /*border-bottom: 1px solid var(--color-brand-secondary-xl);*/
}

.both {
    display: flex;
    justify-content: space-between;
}

.main-menu {
    flex: 1 0 auto;
}

.main-menu-item {
    margin: .6rem auto;
}




.sub-menu {
    flex: 1 0 auto;
    margin-left: -4px;
}


.main-menu-item:hover {
    background: var(--color-brand-primary-xl);
    cursor: context-menu;
}


/*
.dropdown:hover {
    .both {
        display: flex;
    }
}
*/