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

.ui-drawer {
  display: grid;

  &__body {
    bottom: 0;
    display: grid;
    grid-area: body;
    grid-template-areas: "head" "content" "foot";
    grid-template-rows: auto 1fr auto;
    max-width: 50vw;
    overflow: hidden;
    position: fixed;
    text-align: start;
    top: 0;
    transition: transform 0.5s;
    z-index: 249;
  }

  &__shim {
    height: 0;
    transition: background-color 1s;
    width: 0;
    z-index: 248;
    @include position(fixed, 0);
  }

  $base: unquote(".ui-drawer");
  &[data-align="start"] &__body {
    left: 0;
    transform: translateX(-100%);
  }

  &[data-align="end"] &__body {
    right: 0;
    transform: translateX(100%);
  }

  &[data-push="true"] {
    & + .ui-section,
    & + .ui-content,
    & + .ui-viewport {
      transition: transform 0.5s;
    }

    &[data-peek="true"] {
      & + .ui-section,
      & + .ui-content,
      & + .ui-viewport {
        transform: translateX(var(--drawer-width));
      }
    }
  }

  &__toggler {
    align-self: center;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.75;
    padding: 0 0.5rem;

    &:hover {
      opacity: 1;
    }
  }

  &[data-peek="true"] {
    #{$base}__shim {
      height: unset;
      width: unset;
    }

    #{$base}__body {
      transform: translateX(0);
    }
  }
}
