@import '../../../global-styles';

:host {
    display: block;
}

.keymap {
    &__is-default {

        &.fa-star-o {
            cursor: pointer;

            &:hover {
                color: $icon-hover;
            }
        }
    }

    &__remove {
        font-size: 0.75em;
        top: 8px;

        &:not(.disabled):hover {
            cursor: pointer;
            color: $icon-hover-delete;
        }

        &.disabled {
            opacity: 0.25;
        }
    }

    &__duplicate {
        font-size: 0.75em;
        top: 7px;
        margin-right: 15px;
        position: relative;

        &:hover {
            cursor: pointer;
            color: $icon-hover;
        }
    }
}

.keymap__download {
    top: 10px;
    font-size: 0.8em;
    position: relative;
    margin-right: 10px;

    &:hover {
        cursor: pointer;
        color: $icon-hover;
    }
}

.pane-title {
    margin-bottom: 1em;

    &__name,
    &__abbrev {
        border: none;
        border-bottom: 2px dotted #999;
        padding: 0;
        margin: 0 0.25rem;

        &:focus {
            box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
            border-color: transparent;
        }
    }

    &__name {
        width: 290px;
        text-overflow: ellipsis;
    }

    &__abbrev {
        width: 90px;
        text-align: center;
    }
}