/*
 * Copyright (C) 2023 Alessandro Iepure
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

/* Light mode CSS - Main style */

.notes {
    border-radius: 12px;
    background-color: alpha(#dddddd, 0.2);
}

.chip {
    padding: 0 7px;
    line-height: 20px;
    border-radius: 25px;
    background-color: @light_3;
}

.poster {
    border-radius: 12px;
}

.light {
    color: @light_2;
}

.dark {
    color: @dark_3;
}

.still {
    border-radius: 6px;
}

.shadow {
    box-shadow: 0px 0px 4px 4px @accent_color;
}

.pulse {
    animation-name: breathing;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: 0s;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes breathing {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.groupcolor list {
    background-color: alpha(#dddddd, 0.2);
}

.progress_complete progress {
    background-color: @success_color;
}

.progress_error progress {
    background-color: @error_color;
}

/* Theme Switcher
 * Modified from https://gitlab.gnome.org/tijder/blueprintgtk
 * Original header below
 */

/*
 * Base on dialect-app
 * https://github.com/dialect-app/dialect/blob/c0b7ca0580d4c7cfb32ff7ed0a3a08c06bbe40e0/data/resources/style.css
 */

.themeswitcher {
    margin: 9px;
}

.themeswitcher checkbutton {
    min-height: 44px;
    min-width: 44px;
    padding: 1px;
    background-clip: content-box;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px @borders;
}

.themeswitcher checkbutton.system:checked,
.themeswitcher checkbutton.light:checked,
.themeswitcher checkbutton.dark:checked {
    box-shadow: inset 0 0 0 2px @theme_selected_bg_color;
}

.themeswitcher checkbutton.system {
    background-image: linear-gradient(to bottom right, #fff 49.99%, #202020 50.01%);
}

.themeswitcher checkbutton.light {
    background-color: #fff;
}

.themeswitcher checkbutton.dark {
    background-color: #202020;
}

.themeswitcher checkbutton radio {
    -gtk-icon-source: none;
    border: none;
    background: none;
    box-shadow: none;
    min-width: 12px;
    min-height: 12px;
    transform: translate(27px, 14px);
    padding: 2px;
}

.themeswitcher checkbutton.theme-selector radio:checked {
    -gtk-icon-source: -gtk-icontheme("object-select-symbolic");
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}