@use '../theme_colors.scss' as *;

.shortcuts {
    .entry {
        padding: 10px;
        background: color-mix(in srgb, $base00, transparent 15%);
        border-radius: 8px;
        transition: background 0.2s ease;

        &:hover {
            background: $base01;

            >.kbd {
                background: color-mix(in srgb, $base00, transparent 15%);
            }
        }

        label {
            color: $base0A;
            font-size: 14px;
            font-weight: 600;
        }

        .kbd {
            padding: 2px 6px;
            font-size: 0.9em;
            font-family: monospace;
            border-radius: 4px;
            margin: 0 2px;

            background: $base01;
            color: $base0A;
        }
    }

    .not-found {
        background: $base01;
        color: $base0A;
        font-size: 14px;
        padding: 10px;
        border-radius: 8px;

        image {
            margin-bottom: 8px;
        }
    }
}