/**
 * Copyright JS Foundation and other contributors, http://js.foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 **/


#red-ui-settings-tab-keyboard {
    .red-ui-editableList-container {
        border-radius: 0;
        border: none;
        padding: 0;
    }
    .keyboard-shortcut-list-header {
        padding:0 5px 0 5px;
        border-bottom: 1px solid var(--red-ui-primary-border-color);
        div {
            color: var(--red-ui-header-text-color) !important;
        }
        .red-ui-searchBox-container {
            width: calc(100% - 20px);
        }
        .keyboard-shortcut-entry-scope {
            text-align: center;
        }

    }
    .keyboard-shortcut-list {
        position: absolute;
        top:30px;
        left:10px;
        right:10px;
        bottom:10px;
        li {
            padding: 0;
            .red-ui-editableList-item-content {
                padding: 8px;
                cursor: pointer;
            }
        }
        li:hover {
            background: var(--red-ui-list-item-background-hover);
        }
    }
    .keyboard-shortcut-entry {
        div {
            display: inline-block;
        }
        // white-space: nowrap;

        select {
            margin: 0;
            width: calc(100% - 30px);
            font-size: 0.9em;
            margin-right: 5px;
        }
    }
    .keyboard-shortcut-entry-key {
        width:160px;
        vertical-align: middle;
        input {
            margin:0;
            width: calc(100% - 5px);
        }
    }
    .keyboard-shortcut-entry-text {
        vertical-align: middle;
        width: calc(100% - 160px - 100px - 10px);
        overflow: hidden;
        i {
            color: var(--red-ui-tertiary-text-color);
            margin-right: 5px;
        }
    }
    .keyboard-shortcut-entry-scope {
        width:100px;
        color: var(--red-ui-tertiary-text-color);
        vertical-align: middle;
        text-align: right;
    }
    .keyboard-shortcut-entry:not(.keyboard-shortcut-list-header) {
        .keyboard-shortcut-entry-scope {
            font-size: 0.8em;
        }
    }
    .keyboard-shortcut-entry-unassigned {
        color: var(--red-ui-tertiary-text-color);
        .keyboard-shortcut-entry-key {
            font-style: italic;
        }
    }
    .keyboard-shortcut-entry-expanded {
        background: var(--red-ui-list-item-background-selected);
        .keyboard-shortcut-entry-key {
            width: 150px;
        }
        .keyboard-shortcut-entry-text {
        }
        .keyboard-shortcut-entry-scope {
            width: 110px;
        }
        span {
            display: none;
        }
    }
}
.help-key {
    border: 1px solid var(--red-ui-tertiary-border-color);
    padding: 4px;
    border-radius: 3px;
    background: var(--red-ui-tertiary-background);
    font-family: var(--red-ui-monospace-font);
    box-shadow: var(--red-ui-shade-color  1px 1px 1px);
}
.help-key-block {
    white-space: nowrap;
}