@import "checkbox";
@import "package";
@import "radio";
@import "table";

.settings-view {
    .config-menu {
        background: none;
        min-width: 200px;

        .nav li {
            a {
                padding: 1.25em 1.5em;
            }

            &.active a {
                background-color: @base-color;
                color: @accent-text-color;
            }
        }

        .icon::before {
            margin-right: 1.5em;
        }

    }

    .settings-panel {
        .control-group + .control-group {
            margin-top: 2.5em;
        }
    }

    .amu-panel-contrast & {
        .config-menu {
            background-color: darken(@app-background-color, 1%);
        }
    }

    .amu-panel-shadows & {
        .config-menu {
            position: relative;

            &::after {
                background: linear-gradient(to left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
                bottom: 0;
                content: '';
                opacity: .1;
                position: absolute;
                right: 0;
                top: 0;
                width: .25em;
            }
        }
    }

    select.form-control {
        .select();
    }

    input[type="color"] {
        border: none;
        height: 3rem;
        position: absolute;
        width: 3rem;
    }

    .themes-panel {
        .themes-picker-item {
            .select-container {
                align-items: center;
                display: flex;
            }
        }
    }

    .btn {
        &.active-theme-settings,
        &.active-syntax-settings {
                box-shadow: none;
                border-radius: 50%;
                flex-grow: 0;
                height: 2.5rem;
                line-height: 1;
                padding: 0;
                text-align: center;
                width: 2.75rem;
        }
    }

    .section {
        padding: 3rem;
    }

    .breadcrumb + .section {
        padding-top: 1rem;
    }
}

// Inputs, Selects, and More
.select() {
    .select-arrow(@app-background-color);
    background-size: 1.5rem;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: right center;
    border-radius: 0;
    border: none;
    border-bottom: .125rem solid transparent;
    box-shadow: inset 0 -1px 0 fade(@text-color, 10%);
    color: @text-color;
    cursor: pointer;
    line-height: @component-line-height + @component-padding;
    height: @component-line-height + @component-padding;
    padding: 0;
    -webkit-appearance: none;

    &:hover {
        .select-arrow(@app-background-color);
        background-color: transparent;
        box-shadow: inset 0 -1px 0 fade(@text-color, 10%);
    }

    &:active,
    &:focus {
        .select-arrow(@app-background-color);
        background-color: transparent;
        border-color: @base-color;
    }

    option {
        background: @app-background-color;
        border: 1px solid fade(@text-color, 20%);
        color: @text-color;
    }
}

.checkbox,
.radio {
    padding-left: 48px;

    .setting-description {
        margin-top: 0.5rem;
    }
}