@include treelist-ui(
    $ui: 'navigation',
    $padding: 0 10px,

    // Black-ish background color
    $background-color: $panel-navigation-background-color,
    $toolstrip-background-color: #32404e,

    $tool-float-indicator-color: $panel-header-background-color,
    $tool-float-indicator-width: 5px,

    $tool-indicator-selected-color: $panel-header-background-color,
    $tool-indicator-selected-width: 5px,
    $tool-selected-background-color: mix(white, $panel-navigation-background-color, 10%),

    // Darker background for expanded subtrees
    $item-expanded-background-color: #2c3845,

    // Taller line height
    $item-line-height : $panel-navigation-item-line-height,

    $row-over-background-color: mix(white, $panel-navigation-background-color, 5%),
    $row-selected-background-color: mix(white, $panel-navigation-background-color, 10%),

    // Off-white text
    $item-icon-color: $panel-navigation-item-text-color,
    $item-expander-color: #fff,
    $item-text-color: #ADB3B8,

    // Brighter when hovered
    $item-icon-over-color: #fff,
    $item-expander-over-color: #fff,
    $item-text-over-color: mix(white, $panel-navigation-item-text-color, 50%),
    $item-text-font-size: 14px,

    // Various sizes for the pieces:
    $item-icon-font-size: 18px,
    $item-icon-width: 44px,
    $item-expander-font-size: 16px,
    $item-expander-width: 24px,

    // Style the "row indicator" (the vertical stripe on the left edge):
    $row-indicator-width: 5px,
    $row-indicator-selected-color: $panel-header-background-color,
    $row-indicator-selected-over-color: lighten($panel-header-background-color, 7%),
    $row-indicator-over-color: transparent
);



// override of extjs classes to add css variables defined in sass/var/view/main:
.x-form-text-default {
    color: var(--color);
    padding: 5px 10px 4px;
    background-color: var(--body-background-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    min-height: 30px;
}

.x-form-item-label-default {
    color: var(--color);
    font:  var(--font-weight) var(--font-size) var(--font-family);
    min-height: 32px;
    padding-top: 8px;
    padding-right: 5px;
}

.x-btn-inner-default-small {
    font: 500 calc(#{var(--font-size)} - 1px) var(--font-family);
    color: #f0f0f0;
    padding: 0 5px;
    max-width: 100%;
}

.x-btn-over.x-btn-default-small {
    border-color: #578e3e;
    background-image: none;
    background-color: var(--base-color);
    opacity: 0.8;
}


.x-grid-item-selected {
    background-color: #fff;
}

.x-tagfield{
    overflow: visible;
}

//--------------------------------------------------------
// Create classes for full-size responsive items

.x-responsivecolumn {
    padding: 0px 0px 0px 0px;
    > * {
        margin: 0px 0px 0px 0px;
    }
}

.big-820 {
    width: 820px;
    margin-right: auto !important;
    margin-left: auto !important;
}

.big-100 {
    @include responsivecolumn-item(100%);
}
.big-80 {
    @include responsivecolumn-item(80%);
}

.big-70 {
    @include responsivecolumn-item(70%);
}

.big-66 {
    @include responsivecolumn-item(66.66%);
}

.big-60 {
    @include responsivecolumn-item(60%);
}

.big-50 {
    @include responsivecolumn-item(50%);
}

.big-40 {
    @include responsivecolumn-item(40%);
}

.big-33 {
    @include responsivecolumn-item(33.33%);
}

.big-30 {
    @include responsivecolumn-item(30%);
}

.big-20 {
    @include responsivecolumn-item(20%);
}

.big-10 {
    @include responsivecolumn-item(10%);
}

//--------------------------------------------------------
// And classes for small-size responsive items

 .x-responsivecolumn-small {
     > .small-100 {
         @include responsivecolumn-item(100%);
     }

     > .small-60 {
         @include responsivecolumn-item(60%);
     }

     > .small-50 {
         @include responsivecolumn-item(50%);
     }

     > .small-40 {
         @include responsivecolumn-item(40%);
     }
     > .small-30 {
         @include responsivecolumn-item(20%);
     }
     > .small-20 {
         @include responsivecolumn-item(20%);
     }
}

//--------------------------------------------------------
//UI Styles for buttons

@include extjs-button-small-ui(
    $ui: 'header',
    $color: #999,
    $glyph-color: #919191,
    $background-color: transparent,
    $border-width: 0
);

@include extjs-window-ui(
    $ui: 'toast-red',
    $ui-border-color: #FF0000,
);

@include extjs-window-ui(
    $ui: 'toast-green',
    $ui-border-color: $base-color,
);

// custom classes & overrides

.x-window-toast-green .x-autocontainer-innerCt,
.x-window-toast-red .x-autocontainer-innerCt {
    background: #F6F6F6;
    font-size: 15px;
    .x-fa {
        color: #9E9F9F !important;
        margin-right: 10px;
    }
}

.x-window-toast-green,
.x-window-toast-red {
    background: #F6F6F6;
    border-width: 1px;
    border-radius: 2px;
    padding: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

}

.main-container {
    .x-panel-body {
        background-color: #f6f6f6;
    }
}
.section-container {
    padding-bottom:5px;
}

.logo {
    background-color: $base-color;
    height: 65px !important;
    line-height: 65px;
    font-size: 16px;
    color: $lightest-color;
    margin-left: 17px;

    img {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
    }
}

.sencha-dash-dash-headerbar {
    padding: 0 30px 0 0;
    position: fixed;
    width: 100%;
    z-index: 10;
    border: none;
    .header-right-profile-image {
        border-radius: 20px;
    }
}
