:root {
    --right-key-menu-background-color: var(--container-background-color);
    --right-key-menu-border-color: var(--container-outline-color);
    --right-key-menu-shadow-color: var(--content-background-color);
    --right-key-menu-max-width: 300px;
    --right-key-menu-min-width: 100px;

    --right-key-menu-separator-color: var(--content-outline-color);

    --right-key-menu-item-selected-background-color: var(
        --container-outline-color
    );
    --right-key-menu-item-underline-background-color: var(
        --content-background-color
    );

    --right-key-menu-margin: 4px;
}

.right-key-menu {
    position: absolute;
    max-width: var(--right-key-menu-max-width);
    min-width: var(--right-key-menu-min-width);
    width: fit-content;
    height: 0;
    transition: height 0.5s ease 0s;
    display: none;
    background-color: var(--right-key-menu-background-color);
    border-radius: var(--radius);
    border: var(--border-width) solid var(--right-key-menu-border-color);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow) var(--right-key-menu-shadow-color);
    user-select: none;
}

.right-key-menu-item {
    display: grid;
    grid-template-columns: 1em 2fr 1fr;
    gap: var(--margin);
    border-radius: var(--radius);
    padding: 0 var(--right-key-menu-margin) 0 var(--right-key-menu-margin);
    width: auto;
    font-size: medium;
    margin: var(--right-key-menu-margin);
    color: var(--default-color);
}

.right-key-menu-item:hover {
    background-color: var(--right-key-menu-item-selected-background-color);
}

.right-key-menu-item-icon {
    width: 1em;
    color: inherit;
    grid-column: 1;
}

.right-key-menu-item-title {
    text-align: left;
    width: 100%;
    color: inherit;
    grid-column: 2;
    word-wrap: break-word;
}

.right-key-menu-item-key-tips {
    text-align: right;
    width: auto;
    color: inherit;
    grid-column: 3;
    font-weight: lighter;
}

.right-key-menu-separator {
    height: var(--border-width);
    background-color: var(--right-key-menu-separator-color);
    pointer-events: none;
}

.right-key-menu-item-disabled {
    pointer-events: none;
}

.right-key-menu-item-disabled * {
    color: var(--disabled-color);
    fill: var(--disabled-color);
}

.right-key-menu-item-underline {
    background-color: var(--right-key-menu-item-underline-background-color);
}

.right-key-menu-item-selected {
    background-color: var(--right-key-menu-item-selected-background-color);
}