// 
// @description : 
// @author      : Adarsh Pastakia
// @copyright   : 2016
// @license     : MIT

.ui-page {
  overflow: hidden;
  @include flex-fill();
  @include flex-column();

  .ui-page-title {
    z-index      : 5;
    background   : $page-title-bg;
    color        : $page-title-text;
    font-size    : .9em;
    padding      : .25em .5em;
    text-align   : center;
    border-bottom: 1px solid rgba($wg-9,.25);
    @include flex-auto();
  }

  .ui-page-body {
    overflow: hidden;
    @include flex-fill();
    @include flex-column($align:stretch);
  }
}

.ui-section {
  overflow: hidden;
  @include flex-fill();

  &.ui-column-layout {
    @include flex-column($align:stretch);
  }

  &.ui-row-layout {
    @include flex-row($align:stretch, $wrap:false);
  }

  &.ui-align-middle {
    @include justify-content(center);
  }

  &.ui-align-center {
    @include align-items(center);
  }
}

.ui-content {
  position: relative;
  display : block;
  @include flex-fill();
}

.ui-toolbar {
  z-index         : 5;
  font-size       : .8rem;
  background-color: $toolbar-bg;
  padding         : .2em .4em;
  border          : 1px solid rgba($base-border-color, .5);
  border-width    : 1px 0;
  @include flex-auto();
  // @include box-shadow(0 0 1px 0 $base-border-color);
  @include flex-row($align:center, $justify:flex-end, $wrap:false);

  &.ui-start {
    @include justify-content(flex-start);
  }

  .ui-divider {
    border-right: 1px solid $divider-hilight;
    border-left : 1px solid $divider-shadow;
    margin      : .5em .2em;
    @include transform(scaleX(.5));
    @include align-self(stretch);
  }

  .ui-input-group {
    margin: 0 .25rem;
  }

  .ui-button,
  .ui-button-group {
    margin: 0 .2rem;
  }
}

.ui-sidebar {
  z-index   : 5;
  overflow  : hidden;
  position  : relative;
  background: $drawer-bg;
  max-width : $sidebar-width;
  @include flex(0 0 $sidebar-width);
  @include transition(max-width .5s);

  .ui-sidebar-title {
    color         : rgba($base-text, .75);
    @include ellipsis();
    pointer-events: none;
    padding       : $base-padding;
    left          : 0;
    top           : 0;
  }

  .ui-sidebar-head {
    border-bottom: 1px solid rgba($base-border-color, .25);
  }

  &.start {
    @include order(-1);
    @include border(end, 1px solid rgba($base-border-color, .5));

    .ui-sidebar-close:before {
      font-family: Framework;
      content    : $fi-ui-arrow-thin-left;
    }

    &.ui-collapse {
      .ui-sidebar-close:before {
        font-family: Framework;
        content    : $fi-ui-arrow-thin-right;
      }

      &:not(.ui-mini-display) {
        .ui-sidebar-content {
          left: -1 * $sidebar-width;
          @include transition(left .5s);
          @include border(end, 1px solid $base-border-color);
        }

        &.ui-show-overlay {
          .ui-sidebar-content {
            left: 2rem;
            @include box-shadow(25px 0 50px 5px rgba($base-shadow-dark, .25));
          }
        }
      }
    }
  }

  &.end {
    @include order(1);
    @include border(start, 1px solid rgba($base-border-color, .5));

    .ui-sidebar-close:before {
      font-family: Framework;
      content    : $fi-ui-arrow-thin-right;
    }

    &.ui-collapse {
      .ui-sidebar-close:before {
        font-family: Framework;
        content    : $fi-ui-arrow-thin-left;
      }

      &:not(.ui-mini-display) {
        .ui-sidebar-content {
          right: -1 * $sidebar-width;
          @include transition(right .5s);
          @include border(start, 1px solid $base-border-color);
        }

        &.ui-show-overlay {
          .ui-sidebar-content {
            right: 2rem;
            @include box-shadow(-25px 0 50px 5px rgba($base-shadow-dark, .25));
          }
        }
      }
    }
  }

  &.ui-collapse {
    overflow: visible;

    .ui-sidebar-close span:before {
      font-family: Framework;
      content    : $fi-ui-arrow-thin-right;
    }

    &:not(.ui-mini-display) {
      z-index  : 10;
      max-width: 2rem;

      .ui-sidebar-content {
        width           : $sidebar-width;
        z-index         : $z-index-floating;
        background-color: $drawer-bg;
        @include position(absolute, 0 auto);
      }

      .ui-sidebar-title {
        @include apply-origin(0% 0% 0, false);
        @include transform(rotate(90deg) translate(2em,-100%));
        position: absolute;
      }
    }

    &.ui-mini-display {
      max-width: 4rem;

      .ui-sidebar-title {
        display: none;
      }

      .ui-menu-item {
        text-overflow: clip;
        margin-bottom: 1em;

        .ui-menu-icon {
          font-size: 2rem;
        }

        .ui-menu-label {
          max-width: 0;
          overflow : hidden;
        }
      }
    }
  }
}

.rtl,
[dir="rtl"] {
  .ui-sidebar {
    &.start {
      .ui-sidebar-close:before {
        font-family: Framework;
        content    : $fi-ui-arrow-thin-right;
      }

      &.ui-collapse {
        .ui-sidebar-close:before {
          font-family: Framework;
          content    : $fi-ui-arrow-thin-left;
        }

        &:not(.ui-mini-display) {
          .ui-sidebar-content {
            left : auto;
            right: -1 * $sidebar-width;
            @include transition(right .5s);
          }

          &.ui-show-overlay {
            .ui-sidebar-content {
              right: 2rem;
              @include box-shadow(-25px 0 50px 5px rgba($base-shadow-dark, .25));
            }
          }
        }
      }
    }

    &.end {
      .ui-sidebar-close:before {
        content: $fi-ui-arrow-thin-left;
      }

      &.ui-collapse {
        .ui-sidebar-close:before {
          content: $fi-ui-arrow-thin-right;
        }

        &:not(.ui-mini-display) {
          .ui-sidebar-content {
            right: auto;
            left : -1 * $sidebar-width;
            @include transition(left .5s);
          }

          &.ui-show-overlay {
            .ui-sidebar-content {
              left: 2rem;
              @include box-shadow(25px 0 50px 5px rgba($base-shadow-dark, .25));
            }
          }
        }
      }
    }
  }
}
@if $enable-blur {
  .ua-safari .ui-sidebar.ui-collapse > .ui-sidebar-content {
    // background-color: rgba($drawer-bg, .9);
    // @include backdrop-blur(50px);
  }
}