/*
 * SPDX-License-Identifier: GPL-3.0-or-later
 * SPDX-FileCopyrightText: 2023 elementary, Inc. (https://elementary.io)
 */

quicksettings scalebox,
quicksettings .togglebox {
    padding: 0.666rem; /* 6px */
}

quicksettings scalebox scale {
    margin: 0.666rem 0.666rem 0; /* 6px */
}

quicksettings separator.horizontal {
    margin: 0.333rem 0; /* 3px */
}

quicksettings .image-button.toggle {
    border-radius: 1em;
}

quicksettings .image-button {
    border: none;
    box-shadow: none;
    min-height: 2.1666rem; /* 26px */
    min-width: 2.1666rem; /* 26px */
}

quicksettings .image-button {
    background: alpha(@text_color, 0.1);
}

quicksettings .image-button:checked {
    background: @selected_bg_color;
    color: @selected_fg_color;
}

quicksettings .image-button:disabled {
    background: @insensitive_bg_color;
}

quicksettings .no-padding {
    padding: 0;
}

quicksettings .flat avatar {
    border: none;
    box-shadow: none;
}

quicksettings .color-scheme .toggle image {
    transition: all 600ms cubic-bezier(0.66, 3, 0.64, 1);
}

quicksettings .color-scheme .toggle:checked image {
    -gtk-icon-transform: rotate(180deg);
}

quicksettings .rotation .toggle image.arrow {
    animation: rotation-allow 600ms cubic-bezier(0.4, 0, 0.2, 1) 1;
    opacity: 1;
}

quicksettings .rotation .toggle:checked image.arrow {
    animation: rotation-lock 600ms linear 1;
    opacity: 0.5;
}

quicksettings .rotation .toggle image.lock {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
}

quicksettings .rotation .toggle:checked image.lock {
    opacity: 1;
}

@keyframes rotation-lock {
    0% {
        opacity: 1;
        -gtk-icon-transform: rotate(0turn);
    }
    10% {
        -gtk-icon-transform: rotate(0.05turn);
        opacity: 0.5;
    }
    40% {
        -gtk-icon-transform: rotate(-0.04turn);
        opacity: 0.5;
    }
    70% {
        -gtk-icon-transform: rotate(0.01turn);
        opacity: 0.5;
    }
    100% {
        -gtk-icon-transform: rotate(0turn);
        opacity: 0.5;
    }
}

@keyframes rotation-allow {
    from {
        opacity: 0.5;
    }
    to {
        -gtk-icon-transform: rotate(1turn);
        opacity: 1;
    }
}
