// @author    : Adarsh Pastakia
// @version   : 5.0.0
// @copyright : 2018
// @license   : MIT

.ui-sidebar {
  display: grid;
  grid-area: side-start;
  grid-template-areas: "titlebar" "body";
  grid-template-rows: auto 1fr;
  max-width: 50vw;
  overflow: hidden;
  position: relative;
  text-align: start;
  transition: max-width 0.5s;
  z-index: 25;
  @include enable-gpu();

  @at-root .ui-page & {
    box-shadow: none;
  }

  &__titlebar {
    display: grid;
    grid-area: titlebar;
    grid-template-areas: "title toggler";
    grid-template-columns: 1fr auto;
    position: relative;

    &::after {
      content: "";
      @include position(absolute, null 0 0);
    }
  }

  &__body {
    display: grid;
    grid-area: body;
    grid-template-areas: "head" "content" "foot";
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
  }

  $base: unquote(".ui-sidebar");

  &[data-position="end"] {
    grid-area: side-end;

    #{$base}__titlebar {
      grid-template-areas: "toggler title";
      grid-template-columns: auto 1fr;
      @extend .ui-align--end;
    }

    #{$base}__resizer {
      border-radius: 0 4px 4px 0;
      left: 0;
      right: auto;

      @at-root [dir="rtl"] & {
        border-radius: 4px 0 0 4px;
        left: auto;
        right: 0;
      }
    }
  }

  &__title {
    grid-area: title;
    padding: 0.5rem 1rem;
    @include ellipsis();

    &:empty {
      display: none;
    }
  }

  &__toggler {
    align-self: center;
    cursor: pointer;
    grid-area: toggler;
    line-height: 1;
    padding: 0.5rem;

    @at-root [dir="rtl"] & {
      transform: scaleX(-1);
    }
  }

  &__resizer {
    border-radius: 4px 0 0 4px;
    cursor: col-resize;
    height: 4em;
    opacity: 0.75;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;

    &:hover {
      opacity: 1;
    }

    &[data-resizing="true"] {
      height: 100%;
    }

    @at-root [dir="rtl"] & {
      border-radius: 0 4px 4px 0;
      left: 4px;
      right: unset;
    }
  }

  &[data-collapsed="true"] {
    max-width: 2rem;
    overflow: visible;

    #{$base}__titlebar {
      max-width: 2rem;
    }

    #{$base}__title {
      left: 0;
      line-height: 1;
      position: absolute;
      top: 2em;
      transform: rotate(-90deg) translateX(-100%);
      transform-origin: 0 0 0;
    }

    #{$base}__body {
      @include position(fixed, 0 null);
      background: inherit;
      grid-area: unset;
      left: 2rem;
      transform: translateX(calc(-100% - 2rem));
    }

    #{$base}__resizer {
      display: none;
    }

    &[data-position="end"] {
      #{$base}__title {
        transform: rotate(90deg);
      }

      #{$base}__body {
        left: auto;
        right: 2rem;
        transform: translateX(calc(100% + 2rem));
      }
    }

    &[data-peek="true"] {
      #{$base}__body {
        transform: translateX(0);
        transition: transform 0.5s;
        z-index: 24;
      }
    }

    @at-root [dir="rtl"] & {
      #{$base}__title {
        left: -2em;
      }

      #{$base}__body {
        left: auto;
        right: 2rem;
        transform: translateX(calc(100% + 2rem));
      }

      &[data-position="end"] {
        #{$base}__title {
          left: 2em;
        }

        #{$base}__body {
          left: calc(2rem - 2px);
          right: auto;
          transform: translateX(calc(-100% - 2rem));
        }
      }

      &[data-peek="true"] {
        #{$base}__body {
          transform: translateX(0);
        }
      }
    }
  }

  &[data-align="bottom"] {
    grid-template-areas: "body" "titlebar";
    grid-template-rows: 1fr auto;

    #{$base}__titlebar::after {
      bottom: auto;
      top: 0;
    }

    &[data-collapsed="true"] {
      #{$base}__title {
        top: 0;
        transform: rotate(-90deg);
      }

      &[data-position="end"] {
        #{$base}__title {
          transform: rotate(90deg) translateX(-100%);
        }
      }
    }
  }
}
