@import "form/slider.less";
@import "form/switch.less";
@import "form/layout.less";

@import "theme.less";

.sui {
    background: @color-black;
    color: @color-main-light;
    font-family: @default-font;
    
    * {
        margin: 0;
        padding: 0;
    }
    
    .hidden {
        display: none;
    }
    .shown {
        display: block;
    }
    
    input {
        padding: .5em;
    }
    
    button {
        padding: .8em;
    }
    
    > .content {
        padding: @default-padding;
        .heading {
            font-size: 1.2em;
            display: block;
            margin-bottom: @default-margin;
        }
        .container {
            background: @color-container;
            padding: @default-padding;
            border-radius: @default-border-radius;
            border: solid 1px @default-border-color;
            margin-bottom: @default-margin-small;
            &.collapsible {
                > .heading {
                    margin-bottom: 0;
                    &:hover {
                        cursor: pointer;
                    }
                }
                > .content {
                    .hidden;
                }
                &.open {                
                    > .heading {
                        margin-bottom: @default-margin;
                    }
                    > .content {
                        .shown;
                    }
                }
            }
        }
        label {
            color: @color-grey;
        }
        input[type="text"], input[type="password"] {
            height: @input-text-height;
            background: transparent;
            border: none;
            color: @color-white;
            &:focus, &:hover {
                outline: none;
                border-bottom: solid 1px @color-main;
                box-shadow: 3px @color-main;
            }
        }
        input[type="checkbox"] {
            transform: scale(@input-checkbox-scale);
        }
        input[type="range"] {
            padding: 0;
        }
        button {
           background: @color-main;
           color: white;
           border: 0;
         }
        
    }
}

.spiro-control {
    .form-row.info {
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
}