@use "../colors";

// Launcher
.launcher-window {
    color: colors.$on_background;
    border: 1px solid rgba(colors.$outline_variant, 0.5);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    padding: 0px;
    background-color: colors.$surface_container;
    border-radius: 20px 20px 20px 20px;

    .search-bar-container {
        background-color: colors.$surface_container_high;
        border-radius: 15px;
        padding: 0rem 1rem;
        margin: 5px;
        margin-bottom: 0px;

        .launcher-search {
            padding: 0.3rem 0.2rem;
            background-color: transparent;
            outline-width: 0px;
        }

        .search-icon {
            font-family: "Material Symbols Outlined", "Material Icons Outlined";
            font-size: 14pt;
        }

        .clear-button,
        .layout-toggle-button {
            margin: 5px -5px;
            margin-left: 5px;
        }
    }

    .pinned-apps-container {
        margin: 5px;
        background-color: transparent;
        border-radius: 15px;
        .icon {
            font-family: "Material Symbols Outlined", "Material Icons Outlined";
            font-size: 16pt;
            padding: 0px 10px;
        }

        .pinned-item {
            border-radius: 24px;
            background-color: transparent;

            &:hover {
                background-color: colors.$surface_container_high;
            }

            &:focus {
                outline: none;
                background-color: colors.$primary_container;
                border: none;
                .app-label {
                    color: colors.$on_primary_container;
                }
            }
        }
    }

    .outer-box {
        background-color: transparent;
        border-radius: 15px;
        .inner-box {
            padding: 5px;
        }
    }
    .app-item {
        border-radius: 15px;
        background-color: transparent;
        padding: 8px 1rem;

        &:hover {
            background-color: colors.$surface_container_high;
        }

        &:focus {
            outline: none;
            background-color: colors.$surface_container_highest;
        }

        .app-label {
            font-weight: 500;
            color: colors.$on_surface;
        }

        .app-description {
            font-weight: 400;
            color: colors.$on_surface_variant;
        }
    }
}
