@import 'variables';
@import 'mixins';

#my-settings-page,
#my-preferences-page,
#my-track-settings-page {
    .lo-general-header {
        padding: 50px 0 20px;
    }
    .settings-section {
        &.toggle {
            input[type='checkbox'] {
                display:inline-block;
                position:absolute;
                width:25px;
                height:40px;
                cursor:pointer;
                opacity:0;
                &:checked {
                    &+.toggles {
                        i.fa-toggle-on { display:block; }
                        i.fa-toggle-off { display:none; }
                    }
                }
            }
            .toggles {
                display:inline-block;
                @include font-size(20, 20);
                margin-right:5px;
                i.fa-toggle-on {
                    display:none;
                    color: $color-2;
                }
                i.fa-toggle-off {
                    display:block;
                    color: #aaa;
                }
            }
            label {
                display:inline-block;
                position:relative;
                top:-2px;
                margin-bottom:0px;
                color:#666;
            }
            .pure-button {
                display:block;
                margin-top:10px;
            }
        }
    }
}

#my-settings-page,
#my-track-settings-page,
#my-settings-delete-account-page {
    padding-top:30px;
    @include width-small() {
        padding-top:0;
    }
    #notice, #alert, #errors {
        margin-top: -20px;
        margin-bottom: 20px;
    }
    h2 {
        @include font-size(18, 18);
        font-weight:$bold;
        margin-bottom:10px;
        color:#555;
    }
    .settings-section {
        border-bottom:1px solid #ddd;
        padding-bottom:20px;
        margin-bottom:20px;
        &:last-child {
            border-bottom:none;
        }
        &.danger {
            border:1px solid red;
            background:rgba(red, 0.03);
            padding:20px;
            h2 {
                i {
                    color:darkred;
                    @include font-size(15, 18);
                }
            }
            .pure-button {
                background:darkred;
            }
        }
        .alert {
            color:red;
            @include font-size(14, 14);
            font-weight:$bold;
            a {
                color:red;
                text-decoration:underline;
            }
        }
    }
    p,
    ul,
    .token-explanation {
        @include font-size(14, 18);
        font-weight:$fw-regular;
        color:#666;
    }
    ul {
        margin:0 0 10px 0;
        padding: 0 0 0 25px;
    }
    .token-explanation {
        margin-bottom:10px;
    }
    .token-reset {
        margin-top:5px;
        .pure-button {
            background:#dd0000;
        }
    }
    p {
        margin-bottom:15px;
        //padding-bottom:15px;
        //border-bottom:1px solid #eee;

    }
    .widget-code-snippet {
        display:inline-block;

        input {
            width:320px;
            max-width: 95%;
        }
    }
    .field {
        margin-bottom:15px;
        label {
            display:block;
            color:#666;
            @include font-size(14, 14);
            margin-bottom:6px;
        }
        input {
            padding:8px 10px;
            width:250px;
            max-width:100%;
            border:1px solid #ddd;
            border-radius:2px;
        }
    }
    .pure-button {
        background:$color-2;
        color:#fff;
        padding:8px 20px;
    }
    .tracks {
        margin-bottom:15px;
        th {
            text-align:left;
            padding:10px;
            font-weight:$regular;
            border-bottom:1px solid #eee;
        }
    }
    .track {
        margin-bottom:10px;
        position:relative;
        width:auto;

        td {
            padding:10px;
        }

        .anonymous {
            text-align:center;
        }
        .default,
        .anon {
            vertical-align:middle;
            img {
                display:none;
                height:35px;
                border-radius:2px;
                margin-right:5px;
                vertical-align:bottom;
                @include width-small() {
                    display:inline-block;
                }
            }
            .handle {
                display:inline-block;
                padding:8px 5px;
                font-weight:$regular;
                color:#666;
            }
            input[type='text'] {
                padding:8px 10px;
                max-width:210px;
                width:100%;
                border:1px solid #ddd;
                border-radius:2px;
            }
        }
        input[type='checkbox'] {
            display:inline-block;
            position:absolute;
            width:25px;
            height:40px;
            cursor:pointer;
            opacity:0;
            &:checked {
                &+.toggles {
                    i.fa-toggle-on { display:block; }
                    i.fa-toggle-off { display:none; }
                }
            }
        }
        .toggles {
            display:inline-block;
            @include font-size(20, 20);
            margin-right:15px;
            i.fa-toggle-on {
                display:none;
                color: $color-2;
            }
            i.fa-toggle-off {
                display:block;
                color: #aaa;
            }
        }
        .error {
            color:red;
            text-transform:uppercase;
            @include font-size(11, 11);
            padding-top:4px;
            font-weight:$bold;
        }
    }
}

#my-settings-delete-account-page {
    padding-top:30px;
    .field {
        label {
            color:#666;
        }
    }
    .field.checkbox {
        input[type=checkbox] {
            width:auto;
            display:inline-block;
        }
        label {
            display:inline-block;
            color:#666;
        }
    }
}
