@import '../../variables';

window.settings-dialog {
    background-color: $bar-menus-cards;
    color: $bar-menus-text;

    $padding: 1em;
    $primary_bg: $bar-menus-background;
    $spacing: 0.4em;
    $radius: 0.5em;
    $widget-bg: $bar-menus-cards;
    $border: none;
    $fg: $bar-menus-text;


    .header {

        padding: $padding;

        button {
            font-weight: bold;
            padding: $padding*.5 $padding;

        }

        button.close {
            padding: $padding * .5;
        }

        button.reset {
            padding: $padding*.5;
        }
    }

    .page {

        .page-content {
            padding: $padding*2;
            padding-top: 0;
        }
    }

    .group {
        .group-title {
            color: $primary-bg;
            margin-bottom: $spacing*.5;
        }

        .group-reset {
            margin: $spacing * .5;
            padding: $padding * .5;

            &:disabled {
                color: transparent;
            }
        }

        &:not(:first-child) {
            margin-top: $spacing;
        }
    }

    .row {
        background-color: $widget-bg;
        padding: $padding;
        border: $border;
        border-top: none;

        &:first-child {
            border-radius: $radius $radius 0em 0em;
            border: $border;
        }

        &:last-child {
            border-radius: 0em 0em $radius $radius;
        }

        &:first-child:last-child {
            border-radius: $radius;
            border: $border;
        }

        button.reset {
            margin-left: $spacing;
        }

        label.id,
        label.note {
            color: transparentize($fg, .4)
        }

        entry,
        button {
            padding: $padding;
        }

        spinbutton {
            entry {
                border-radius: $radius 0em 0em $radius;
            }

            button {
                border-radius: 0em;
            }

            button:last-child {
                border-radius: 0em $radius $radius 0em;
            }
        }

        .enum-setter {
            label {
                background-color: $widget-bg;
                border: $border;
                padding: 0em $padding;
                border-radius: $radius 0em 0em $radius;
            }

            button {
                border-radius: 0em;
            }

            button:last-child {
                border-radius: 0em $radius $radius 0em;
            }
        }

        &.wallpaper {
            button {
                margin-top: $spacing * .5;
            }

            .preview {
                border-radius: $radius;
            }
        }
    }
}

.option-item {
    margin: 0em 2em;
    margin-bottom: 1em;

    .reset {
        color: $bar-menus-iconbuttons-passive;
    }
    .options-label {
        color: $bar-menus-text;
    }
    .options-sublabel {
        font-size: 0.75em;
        margin-top: 0.2em;
        color: $bar-menus-dimtext;
    }
    .inputter-container {
        border-radius: $bar-menus-border-radius * 0.5;
        :first-child {
            border-radius: $bar-menus-border-radius * 0.5;
        }
        padding: 0.35em 0.35em;
        background: $surface1;
        margin-right: 1em;
    }
}
.options-header {
    margin: 1em 1em;
    .label-name {
        color: $bar-menus-label;
        font-size: 0.9em;
        margin-right: 0.5em;
    }
}