@import "form.less";

@color-black: #000000;
@color-white: #eeeeee;
@color-main: #097479;
@color-main-light: #0eb8c0;
@color-container: #333333;

@default-padding: 16px;
@default-margin: 16px;
@default-margin-small: 8px;
@default-border-radius: 4px;
@default-border-color: #555555;

@input-text-height: 16px;
@input-checkbox-scale: 2;

.sui {
    background: @color-black;
    color: @color-main-light;
    
    * {
        margin: 0;
        padding: 0;
    }
    
    .hidden {
        display: none;
    }
    .shown {
        display: block;
    }
    
    input,
    button {
        padding: .5em;
    }
    
    > .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;
                    }
                }
            }
        }
        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);
        }
        button {
           background: @color-main;
           color: white;
           border: 0;
         }
        
    }
}