box.cc {
    margin-top: 8px;
    margin-bottom: 14px;
    margin-left: 14px;
    background: rgba($background, .85);
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    padding: 18px;
    box-shadow: 0 5 8px 1px black;
}

.top-bar {
    margin-bottom: 15px;

    & label {
        &.hostname {
            font-size: 13.3px;
            font-weight: 700;
            border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .5);
            padding-bottom: 4px;
        }

        &.uptime {
            font-size: 11.7px;
            font-weight: 500;
        }
    }

    .button-row {
        margin: 7px 0;
    }

    .color-picker {
        padding-right: 11px;
    }

    .powermenu {
        padding-right: 11px;
    }
}

.big-media {
    padding: 16px;
    margin: 6px 0;
    border-radius: 18px;

    & > .album-image {
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center 0;
        margin-right: 12px;
        border-radius: 11px;
    }

    & > .right {

        & > .media-info { 
            label {
                font-family: "Cantarell", "Noto Sans CJK JP";
            }

            & label.title {
                font-weight: 700;
                font-size: 16px;
                margin-bottom: 6px;
            }

            & label.artist {
                font-weight: 600;
                font-size: 12px;
                margin-bottom: 12px;
            }
        }

        & > .controls {
            padding: 0px;

            & > button {
                padding: 4px 9px;

                & > label {
                    font-size: 13.3px;
                }
            }

            & > button.repeat {
                padding-right: 11px;
            }
        }
    }

    &.album-bg {
        box-shadow: inset 0 0 0 100px rgba($background, .6);
        background-size: cover;
    }
}

.cc-notifications {
    & > .vertical-scroll {
        .notifications {
            box.notification {
                background: darken($color: $color1, $amount: 10);
                border-radius: 16px;
                margin: 4px 0;

                & > .top {
                    border-top-left-radius: inherit;
                    border-top-right-radius: inherit;
                    background: darken($color: $color1, $amount: 7);
                    border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .3);
                    padding: 5px 6px;

                    & > .app-info {
                        & .app-icon {
                            margin-right: 4px;
                        }
                        font-weight: 600;
                    }
                }

                & .content {
                    padding: 8px;
                    padding-top: 0px;

                    & > .image {
                        border-radius: 16px;
                        margin-right: 6px;
                        margin-top: 6px;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center 0;
                    }

                    & .text {
                        & label {
                            font-family: "Cantarell", "Noto Sans CJK JP", "Noto Sans CJK KR";
                        }

                        & label.summary {
                            font-weight: 600;
                            font-size: 18px;
                            margin-top: 6px;
                        }

                        & label.body {
                            font-size: 13.1px;
                            margin-bottom: 2px;
                        }
                    }
                }
            }
        }
    }

    & .bottom {
        margin-top: 4px;

        &.button-row {
            & button.do-not-disturb {
                padding-right: 12px;
            }
        }
    }
}

.toggles {
    
    margin-bottom: 10px;
    
    & > .toggle-checkbox:first-child {
        margin-left: 0;
    }

    & > .toggle-checkbox:last-child {
        margin-right: 0;
    }

    & .toggle-checkbox {
        margin: 2px;

        &:hover {
            & > box {
                background: darken($color: $color2, $amount: 15);
            }
        }

        &:checked {
            & > box {
                background: darken($color: $color1, $amount: 12);
            }
        }

        & > *:not(box) {
            color: transparent;
        }

        & > .toggle {
            background: darken($color: $foreground, $amount: 65);
            border-radius: 16px;
            padding: 16px;
            margin-left: -16px; // This covers the checkbox space, hiding the check thing

            .icon {
                font-size: 14px;
                padding-right: 5px;
            }

            .label {
                font-size: 12px;
                font-weight: 600;
            }
        }
    }
}