/* ==========================================================================
 * Slideout
 * ========================================================================== */

.mds-c-slideout {
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  right: 0;
  transition: opacity 0.2s ease-out;
  transition-delay: 0.2s;
  z-index: calc($z-index--navigation + 1);

  &--position-left {
    left: $navigation-width--sm;
  }

  /* Overlay */
  &::after {
    background-color: var(--mds-t-background-color--overlay);
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition-duration: 0.3s;
    transition-property: opacity;
    transition-timing-function: ease-out;
    z-index: -1;
  }

  &.mds-is-open {
    opacity: 1;
    pointer-events: all;

    /* transition-delay: 0s; */

    &::after {
      opacity: 0.8;
    }
  }
}

.mds-c-slideout__panel {
  @mixin mds-m-scroll-vertical;

  --mds-t-background-color: var(--mds-t-background-color--primary);

  background-color: var(--mds-t-background-color);
  bottom: 0;
  box-shadow: var(--mds-d-elevation--4);
  height: 100vh;
  max-width: 100%;
  position: absolute;
  top: 0;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.75, 0.35, 0, 1);
  width: 100%;

  @media screen and (min-width: 768px) {
    width: 48rem;
  }

  .mds-c-slideout--position-left & {
    left: 0;
  }

  .mds-c-slideout--position-right & {
    right: 0;
  }

  .mds-is-open & {
    opacity: 1;
    transition-duration: 0.6s;
  }
}