@use "sass:color";
@use "scheme";
@use "lib";
@use "font";

@mixin launcher($mode, $colour) {
    &.#{$mode} {
        label.icon {
            color: $colour;
        }

        .separator {
            background-color: color.change($colour, $alpha: 0.7);
        }

        .search-bar {
            .mode {
                @include lib.border($colour, $width: 2);
            }

            .entry {
                border-bottom: lib.s(2) solid $colour;
            }
        }

        .mode-switcher .mode {
            &.selected {
                border-top: lib.s(2) solid $colour;
            }

            &:hover,
            &:focus {
                color: $colour;
            }

            &:active {
                color: color.mix($colour, scheme.$base, 80%);
            }
        }
    }
}

.launcher {
    @include lib.rounded(10);
    @include lib.shadow;
    @include font.mono;

    background-color: scheme.$base;
    color: scheme.$text;
    padding: lib.s(14);
    font-size: lib.s(16);
    min-width: lib.s(700);
    min-height: lib.s(420);

    @include launcher(apps, scheme.$primary);
    @include launcher(files, scheme.$secondary);
    @include launcher(math, scheme.$tertiary);

    .search-bar {
        margin-bottom: lib.s(15);

        @include lib.spacing(10);

        .mode {
            @include lib.rounded(5);
            @include lib.element-decel;

            padding: lib.s(5);
        }
    }

    .mode-switcher .mode {
        @include lib.element-decel;

        border-top: lib.s(2) solid transparent;
        padding-top: lib.s(10);

        .icon {
            font-size: lib.s(24);
        }

        & > box {
            @include lib.spacing(10);
        }
    }

    .result {
        @include lib.element-decel;

        border-bottom: lib.s(2) solid transparent;
        padding-left: lib.s(10);

        .icon {
            font-size: lib.s(32);
        }

        .has-sublabel {
            padding: lib.s(3) 0;
        }

        .sublabel {
            color: scheme.$subtext0;
            font-size: lib.s(14);
        }

        & > box {
            @include lib.spacing(10);
        }

        &.italic {
            font-style: italic;
        }

        &:hover {
            background-color: scheme.$surface0;
        }

        &:focus {
            border-bottom: lib.s(2) solid scheme.$red;
            color: scheme.$red;

            .sublabel {
                color: color.mix(scheme.$red, scheme.$base, 70%);
            }
        }

        &:active {
            background-color: scheme.$surface1;
        }
    }

    .math {
        .preview > * {
            margin-bottom: lib.s(10);
        }

        .result {
            @include lib.spacing(10);
        }
    }

    .swatches {
        @include lib.spacing(3);
    }

    .swatch {
        @include lib.rounded(100);

        min-width: lib.s(16);
        min-height: lib.s(16);

        &.big {
            min-height: lib.s(32);

            &.left {
                @include lib.border(scheme.$overlay0, 0.3);

                border-right: none;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            &.right {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }

    .wallpaper {
        margin: lib.s(3) 0;

        .thumbnail {
            background-size: cover;
            background-position: center;
        }

        &.compact .thumbnail {
            @include lib.rounded(100);

            min-width: lib.s(32);
            min-height: lib.s(32);
        }

        &:not(.compact) {
            @include lib.spacing(3, true);

            .thumbnail {
                @include lib.rounded(10);

                & > * {
                    background-size: cover;
                    background-position: center;

                    &:first-child {
                        @include lib.rounded(10, $tr: 0, $br: 0);
                    }

                    &:last-child {
                        @include lib.rounded(10, $tl: 0, $bl: 0);
                    }
                }
            }
        }

        &.medium .thumbnail {
            min-height: lib.s(96);
        }

        &.large .thumbnail {
            min-height: lib.s(160);
        }
    }
}