@import "../global/mixin.less";
@import "../global/variable.less";
/* === White layout === */
.layout-white {
    @pageBg: #fff;
    @barsBg: #fff;
    @barsBorder: #ddd;
    @barsText: #000;
    @tabBarText: #777;
    @text: #000;
    @lightText: #777;
    @strongText: #777;
    @activeLink: #eee;
    @blockBg: @pageBg;
    @blockBorder: #ddd;
    @blockStrongBg: #fafafa;
    @dividerBg: #f7f7f7;
    @itemAfterText: #8e8e93;
    @searchbarBg: #c9c9ce;
    @searchbarBorder: #b4b4b4;
    @swipeoutButton: #c7c7cc;
    @checkboxBorder: #e5e5e5;
    .navbar, .navbar&, .subnavbar, .subnavbar& {
        .hairline-color(bottom, @barsBorder);
        background-color: @barsBg;
        color:@barsText;
    }
    .toolbar, .toolbar& {
        .hairline-color(top, @barsBorder);
        background-color: @barsBg;
        color:@barsText;
    }

    // Picker
    .picker-modal {
        .toolbar {
            background-color: @barsBg;
        }
    }
    .popover .picker-modal .toolbar {
        background: none;
    }
    .popover .picker-modal, .picker-modal.picker-modal-inline {
        .picker-center-highlight {
            .hairline-color(top, @barsBorder);
            .hairline-color(bottom, @barsBorder);
        }
        .picker-calendar-week-days, .picker-calendar-row {
            .hairline-color(bottom, @barsBorder);
        }
        .toolbar ~ .picker-modal-inner .picker-calendar-months,  .picker-calendar-week-days ~ .picker-calendar-months {
            .hairline-color(top, @barsBorder);
        }
    }
    .popover .picker-modal {
        .toolbar {
            .hairline-color(bottom, @barsBorder);
        }
    }
    // Photo Browser
    .photo-browser, .views .view[data-page="photo-browser-slides"] {
        .navbar, .toolbar {
            color:#000;
            background: rgba(247,247,247,0.95);
        }
    }
    .photo-browser-dark {
        .navbar, .toolbar {
            background: rgba(30,30,30,0.8);
            color:#fff;
        }
    }
    .tabbar a:not(.active) {
        color:@tabBarText;
    }
    .page, .page&, .panel, .panel& {
        background-color: @pageBg;
        color: @text;
    }
    .content-block-title {
        color:@strongText;
    }
    .content-block, .content-block& {
        color:@lightText;
    }
    .content-block-inner {
        background: @blockStrongBg;
        color:@text;
        .hairline-color(bottom, @blockBorder);
        .hairline-color(top, @blockBorder);
    }
    .list-block, .list-block& {
        ul {
            background: @blockBg;
            .hairline-color(bottom, @blockBorder);
            .hairline-color(top, @blockBorder);
        }
        &.inset ul{
            background: @blockStrongBg;
        }
        &.notifications > ul {
            background: none;
        }
    }
    .popover-inner > .list-block ul {
        background: none;
    }
    li.sorting {
        background-color: @activeLink;
    }
    .swipeout-actions-left a, .swipeout-actions-right a {
        background-color: @swipeoutButton;
    }
    .item-inner, .list-block ul ul li:last-child .item-inner {
        border-color: @blockBorder;
        .hairline-color(bottom, @blockBorder);
    }
    .item-after {
        color:@itemAfterText;
    }
    .item-link, label.label-checkbox, label.label-radio {
        html:not(.watch-active-state) &:active, &.active-state {
            background-color: @activeLink;
        }
    }
    .item-link.list-button {
        .hairline-color(bottom, @blockBorder);
    }
    .list-block-label {
        color:@lightText;
    }
    .item-divider, .list-group-title {
        background: @dividerBg;
        color:@lightText;
        .hairline-color(top, @blockBorder);
    }

    // Searchbar
    .searchbar {
        background: @searchbarBg;
        .hairline-color(bottom, @searchbarBorder);
    }

    // Forms
    .list-block, .list-block& {
        input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
            color:@strongText;
        }
    }
    .label-switch .checkbox {
        background-color: @checkboxBorder;
        &:before {
            background-color: @blockBg;
        }
    }
    .range-slider input[type="range"]:after {
        background: @blockBg;
    }
}
