$variant: 'light';
$contrast: 'normal';

// Import the colours
@import 'colors-custom';

/* Accent Colors */
@define-color accent_color #{"" + $selected_bg_color};
@define-color accent_bg_color #{"" + $selected_bg_color};
@define-color accent_fg_color #{"" + $selected_fg_color};

/* Window Colors */
@define-color window_bg_color #{"" + $base_color};
@define-color window_fg_color #{"" + $fg_color};

/* View Colors */
@define-color view_bg_color #{"" + $text_input_color};
@define-color view_fg_color #{"" + $text_color};

/* Header Bar Colors */
@define-color headerbar_bg_color #{"" + $bg_dark_color};
@define-color headerbar_fg_color #{"" + $title_fg};
@define-color headerbar_backdrop_color #{"" + $bg_dark_color};

/* Card Colors */
$card_color: darken($text_input_color, 6%);
@define-color card_bg_color #{"" + $card_color};
@define-color card_fg_color #{"" + $fg_color};
@define-color card_shade_color #{"" + $fg_color};

/* Popover Colors */
@define-color popover_bg_color #{"" + $popover_bg_color};
@define-color popover_fg_color #{"" + $fg_color};


/* Fix the avatar shape */
avatar { border-radius: 4px }

list {
    button.image-button:not(.toggle), button.toggle:checked,
    button:hover, spinbutton {
        outline: 1px #{"@borders"} solid;
        outline-offset: -1px;
    }
}

button.combo, button.text-button {
    outline: 1px #{"@borders"} solid;
    outline-offset: -1px;
}

list spinbutton button.image-button:not(.toggle),
list button.image-button.background-preview-button,
headerbar button.text-button {
    outline-width: 0;
}

checkbutton {
    radio, check {
        &:not(:checked) {
            background-color: #{"" + $text_input_color};
            &:backdrop {
                background-color: #{"" + $backdrop_text_input_color};
            }
        }
    }
}

.dim-label {
    opacity: 0.75
}

entry {
    background: #{"@view_bg_color"};
    color: #{"@view_fg_color"};
}

switch{
    border: 1px solid #00000044
}