@import 'main';

$layout-prefix-cls: $okt-prefix + '-layout';
$layout-header-height        : 64px;
$layout-trigger-height       : 48px;
$layout-zero-trigger-width   : 36px;
$layout-zero-trigger-height  : 42px;

.#{$layout-prefix-cls} {
  @include flexbox();
  @include flex-direction(column);
  @include flex(1, 1, auto);

  &.#{$layout-prefix-cls}-has-sider {
    @include flex-direction(row);
    > .#{$layout-prefix-cls} {
      &, &-content {
        overflow-x: hidden;
      }
    }
  }

  &-header, &-footer {
    @include flex(0, 0, auto);
  }

  &-header {

  }

  &-footer {

  }

  &-content {
    @include flex(1, 1, auto);
  }

  &-sider {
    @include transition();

    /* fix firefox can't set width smaller than content on flex item */
    min-width: 0;

    &-children {
      height: 100%;
      // Hack for fixing margin collaspe bug
      // https://github.com/ant-design/ant-design/issues/7967
      // solution from https://stackoverflow.com/a/33132624/3040605
      padding-top: 0.1px;
      margin-top: -0.1px;
    }

    &-has-trigger {
      padding-bottom: $layout-trigger-height;
    }

    &-right {
      order: 1;
    }

    &-trigger {
      position: fixed;
      text-align: center;
      bottom: 0;
      cursor: pointer;
      height: $layout-trigger-height;
      line-height: $layout-trigger-height;
      z-index: 1;
      @include transition();
    }

    &-zero-width {
      & > * {
        overflow: hidden;
      }

      &-trigger {
        position: absolute;
        top: $layout-header-height;
        right: -$layout-zero-trigger-width;
        text-align: center;
        width: $layout-zero-trigger-width;
        height: $layout-zero-trigger-height;
        line-height: $layout-zero-trigger-height;
        font-size: $layout-zero-trigger-width / 2;
        @include border-radius(0 $default_border_radius $default_border_radius 0);
        cursor: pointer;
        @include transition(.3s, ease);
      }
    }
  }
}