@use '../colors' as *;

.launcher {
    entry {
        background: $primary;
        color: $onPrimary;
        padding: 8px 12px;
        border: none;

        margin-bottom: 6px;
        
        &:focus {
            outline: 2px solid $onPrimary;
        }
    }

    .application {
        padding: 10px;
        background: $primary;
        border-radius: 8px;
        transition: background 0.2s ease;

        &:hover {
            background: $onPrimary;
        
            box>.name, box>.description {
                color: $primary;
            }
        }

        image {
            margin-right: 12px;
        }

        box {
            .name {
                color: $onPrimary;
                font-size: 14px;
                font-weight: 600;
            }

            .description {
                color: $onPrimary;
                font-size: 12px;
            }
        }
    }

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

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