.button-box button {
    min-width: 86px; /* https://github.com/elementary/granite/issues/577#issuecomment-1318979272 */
}

.logo {
    animation: rainbow-bg 30s linear infinite;
    background-image: linear-gradient(
        to bottom,
        alpha(@BLUEBERRY_500, 0.25),
        alpha(@BLUEBERRY_700, 0.75)
    );
    border-radius: 50%;
    box-shadow:
        inset 0 -2px 0 0 alpha(@highlight_color, 0.2),
        inset 0 2px 0 0 alpha(@highlight_color, 0.3),
        inset 2px 0 0 0 alpha(@highlight_color, 0.07),
        inset -2px 0 0 0 alpha(@highlight_color, 0.07),
        inset 0 0 0 1px alpha(black, 0.7);
    color: white;
    -gtk-icon-shadow:
        0 1px 1px alpha(black, 0.3),
        0 2px 3px alpha(@BLUEBERRY_900, 0.2);
    -gtk-icon-style: symbolic;
}


/*FIXME: Remove after Granite 7.7.0*/
.numeric {
    font-feature-settings: "tnum";
}

@keyframes rainbow-bg {
    from {
        background-image: linear-gradient(
            to bottom,
            alpha(@BLUEBERRY_500, 0.25),
            alpha(@BLUEBERRY_700, 0.75)
        );
        -gtk-icon-shadow:
            0 1px 1px alpha(black, 0.3),
            0 2px 3px alpha(@BLUEBERRY_900, 0.2);
    }

    12.5% {
        background-image: linear-gradient(
            to bottom,
            alpha(@MINT_500, 0.25),
            alpha(@MINT_700, 0.75)
        );
        -gtk-icon-shadow:
            0 1px 1px alpha(black, 0.3),
            0 2px 3px alpha(@MINT_900, 0.2);
    }

    25% {
        background-image: linear-gradient(
            to bottom,
            alpha(@LIME_500, 0.25),
            alpha(@LIME_700, 0.75)
        );
        -gtk-icon-shadow:
            0 1px 1px alpha(black, 0.3),
            0 2px 3px alpha(@LIME_900, 0.2);
    }

    37.5% {
        background-image: linear-gradient(
            to bottom,
            alpha(@BANANA_500, 0.25),
            alpha(@BANANA_700, 0.75)
        );
        -gtk-icon-shadow:
            0 1px 1px alpha(black, 0.3),
            0 2px 3px alpha(@BANANA_900, 0.2);
    }

    50% {
        background-image: linear-gradient(
            to bottom,
            alpha(@ORANGE_500, 0.25),
            alpha(@ORANGE_700, 0.75)
        );
        -gtk-icon-shadow:
            0 1px 1px alpha(black, 0.3),
            0 2px 3px alpha(@ORANGE_900, 0.2);
    }

    62.5% {
        background-image: linear-gradient(
            to bottom,
            alpha(@STRAWBERRY_500, 0.25),
            alpha(@STRAWBERRY_700, 0.75)
        );
        -gtk-icon-shadow:
            0 1px 1px alpha(black, 0.3),
            0 2px 3px alpha(@STRAWBERRY_900, 0.2);
    }

    75% {
        background-image: linear-gradient(
            to bottom,
            alpha(@BUBBLEGUM_500, 0.25),
            alpha(@BUBBLEGUM_700, 0.75)
        );
        -gtk-icon-shadow:
            0 1px 1px alpha(black, 0.3),
            0 2px 3px alpha(@BUBBLEGUM_900, 0.2);
    }

    87.5% {
        background-image: linear-gradient(
            to bottom,
            alpha(@GRAPE_500, 0.25),
            alpha(@GRAPE_700, 0.75)
        );
        -gtk-icon-shadow:
            0 1px 1px alpha(black, 0.3),
            0 2px 3px alpha(@GRAPE_900, 0.2);
    }

    to {
        background-image: linear-gradient(
            to bottom,
            alpha(@BLUEBERRY_500, 0.25),
            alpha(@BLUEBERRY_700, 0.75)
        );
        -gtk-icon-shadow:
            0 1px 1px alpha(black, 0.3),
            0 2px 3px alpha(@BLUEBERRY_900, 0.2);
    }
}

list.background row {
    border-radius: 0.5em;
    transition: background 200ms ease-in-out;
}

list.background row + row {
    margin-top: 1em;
}

list.background row:focus {
    background: transparent;
    color: inherit;
}

list.background row:focus-visible {
    background: alpha(@text_color, 0.1);
}

navigation-view-page.partition levelbar block {
    border-radius: 0.333em;
}

navigation-view-page.partition levelbar block:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

navigation-view-page.partition levelbar block:not(:last-child) {
    border-right-style: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

navigation-view-page.partition levelbar block.legend {
    border-radius: 50%;
    border-style: solid;
    min-height: 14px;
    min-width: 14px;
}

navigation-view-page.partition levelbar block.swap {
    background-color: @STRAWBERRY_500;
}

navigation-view-page.partition levelbar block.ext4 {
    background-color: @LIME_500;
}

navigation-view-page.partition levelbar block.ext3 {
    background-color: @MINT_500;
}

navigation-view-page.partition levelbar block.ext2 {
    background-color: @BUBBLEGUM_500;
}

navigation-view-page.partition levelbar block.fat16,
navigation-view-page.partition levelbar block.fat32 {
    background-color: @BANANA_500;
}

navigation-view-page.partition levelbar block.btrfs {
    background-color: @BLUEBERRY_500;
}

navigation-view-page.partition levelbar block.xfs {
    background-color: @SLATE_100;
}

navigation-view-page.partition levelbar block.ntfs {
    background-color: @COCOA_300;
}

navigation-view-page.partition levelbar block.luks {
    background-color: @ORANGE_500;
}

navigation-view-page.partition levelbar block.lvm {
    background-color: @GRAPE_500;
}

navigation-view-page.partition levelbar block.none,
navigation-view-page.partition levelbar block.unused {
    background-color: @SILVER_300;
}

navigation-view-page.partition levelbar block image {
    min-height: 16px; /* Preserve height when empty */
    padding: 0.5em;
    -gtk-icon-palette: error #fff, success #fff, warning #fff;
    -gtk-icon-shadow:
        0 1px 1px alpha(#000, 0.2),
        0 1px 3px alpha(#000, 0.1);
}
