_contextmenu.scss

//
// Context Menu
//
.context-menu {
    color-scheme: var(--typo3-component-color-scheme);
    font-size: var(--typo3-component-font-size);
    line-height: var(--typo3-component-line-height);
    padding: 2px;
    position: absolute;
    z-index: 1000;
    color: var(--typo3-component-color);
    border: var(--typo3-component-border-width) solid var(--typo3-component-border-color);
    background-color: var(--typo3-component-bg);
    box-shadow: var(--typo3-component-box-shadow-strong);
    border-radius: var(--typo3-component-border-radius);
    max-height: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin: 0;
    overflow-y: auto;
    top: 0;
    inset-inline-start: 0;

    &-group {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1px;
        list-style: none;
        padding: 0;
        margin: 0;
        min-width: 150px;
    }

    &-divider {
        padding: 0;
        height: 0;
        margin-top: var(--typo3-list-item-padding-y);
        margin-bottom: var(--typo3-list-item-padding-y);
        border-top: var(--typo3-component-border-width) solid var(--typo3-component-border-color) !important;
        outline: none;
    }

    &-item {
        position: relative;
        display: flex;
        border-radius: calc(var(--typo3-component-border-radius) - var(--typo3-component-border-width));
        gap: .5em;
        padding: var(--typo3-list-item-padding-y) var(--typo3-list-item-padding-x);
        cursor: pointer;
        text-decoration: none;

        &:hover,
        &:focus {
            z-index: 1;
            outline-offset: -1px;
        }

        &:hover {
            color: var(--typo3-component-hover-color);
            background-color: var(--typo3-component-hover-bg);
            outline: 1px solid var(--typo3-component-hover-border-color);
        }

        &:focus {
            color: var(--typo3-component-focus-color);
            background-color: var(--typo3-component-focus-bg);
            outline: 1px solid var(--typo3-component-focus-border-color);
        }

        &-icon {
            user-select: none;
            flex-shrink: 0;
            flex-grow: 0;
            width: var(--icon-size-small);
        }

        &-label {
            user-select: none;
            flex-grow: 1;
        }

        &-indicator {
            user-select: none;
            flex-shrink: 0;
            flex-grow: 0;
            width: var(--icon-size-small);
        }
    }
}