@import "../global/mixin.less";
@import "../global/variable.less";
/*==========================
Framework7 Layouts Themes
==========================*/
/* === Dark layout === */
.layout-dark {
    @pageBg: #222426;
    @barsBg: #131313;
    @barsBorder: #333;
    @barsText: #fff;
    @tabBarText: #fff;
    @text: #ddd;
    @lightText: #bbb;
    @strongText: #fff;
    @activeLink: #29292f;
    @blockBg: #1c1d1f;
    @blockBorder: #393939;
    @blockStrongBg: #1c1d1f;
    @dividerBg: #1a1a1a;
    @itemAfterText: @lightText;
    @searchbarBg: #333;
    @searchbarBorder: #333;
    @swipeoutButton: #444;
    @checkboxBorder: @blockBorder;
    .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;
    }
    .picker-calendar-week-days {
        color:#fff;
        background-color: @barsBg;
    }
    .popover .picker-modal, .picker-modal.picker-modal-inline {
        .picker-center-highlight {
            .hairline-color(top, @barsBorder);
            .hairline-color(bottom, @barsBorder);
        }
        .picker-item.picker-selected {
            color:#fff;
        }
        .picker-calendar-week-days {
            color: #fff;
        }
        .picker-calendar-day {
            color:#fff;
            &.picker-calendar-day-prev, &.picker-calendar-day-next {
                color: #777;
            }
            &.picker-calendar-day-disabled {
                color: #555;
            }
            &.picker-calendar-day-today span {
                background: #333;
            }
            &.picker-calendar-day-has-events span:after {
                background: #555;
            }
        }
        .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(top, @blockBorder);
        .hairline-color(bottom, @blockBorder);
    }
    .list-block, .list-block& {
        ul {
            background: @blockBg;
            .hairline-color(top, @blockBorder);
            .hairline-color(bottom, @blockBorder);
        }
        &.inset ul{
            background: @blockStrongBg;
        }
        &.notifications > ul {
            background: none;
        }
    }
    .autocomplete-dropdown  {
        background: @blockBg;
        .list-block b {
            color: #fff;
        }
    }
    .card {
        background: @blockBg;
    }
    .card-header{
        .hairline-color(bottom, @blockBorder);
    }
    .card-footer {
        .hairline-color(top, @blockBorder);
        color:@lightText;
    }
    .popover, .popover& {
        background: rgba(0,0,0,0.8);
        .popover-angle:after {
            background: rgba(0,0,0,0.8);
        }
        .list-block ul {
            background: none;
        }

    }
    .actions-popover .list-block ul {
        .hairline-color(top, @blockBorder);
        .hairline-color(bottom, @blockBorder);
    }
    .actions-popover .actions-popover-label {
        .hairline-color(bottom, @blockBorder);
    }
    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 {
        .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;
    }
    .range-slider input[type="range"]::-ms-thumb {
        border: none;
    }
}
