@import '../../styles/common';

$sheet-desktop-width: 380px;

.Sheet {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: var(--p-surface);
  box-shadow: var(--p-shadow-modal);

  @media screen and (-ms-high-contrast: active) {
    border-left: var(--p-border-base);
  }

  @include frame-when-nav-displayed {
    right: 0;
    width: $sheet-desktop-width;
  }

  &:focus {
    outline: 0;
  }
}

.Container {
  position: fixed;
  z-index: var(--p-z-11);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  @include frame-when-nav-displayed {
    left: auto;
    width: $sheet-desktop-width;
  }
}

.Bottom {
  will-change: transform;
  transition: transform var(--p-duration-300) var(--p-ease);
  transform-origin: bottom;
}

.enterBottom {
  transform: translateY(100%);
}

.enterBottomActive {
  transform: translateY(0%);
}

.exitBottom {
  transform: translateY(0%);
}

.exitBottomActive {
  transform: translateY(100%);
}

.Right {
  will-change: transform;
  transition: transform var(--p-duration-300) var(--p-ease);
  transform-origin: right;
}

.enterRight {
  transform: translateX(100%);
}

.enterRightActive {
  transform: translateX(0%);
}

.exitRight {
  transform: translateX(0%);
}

.exitRightActive {
  transform: translateX(100%);
}