@tailwind base;
@tailwind components;
@tailwind utilities;

/* purgecss start ignore */
.sidebar {
  position: fixed;
  overflow-y: scroll;
  top: 0;
  background: white;
  z-index: 2000;
  width: 0;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);

  &.open {
      background-color: rgba(255, 255, 255, 100%);
      display: block;
      height: 100vh;
      right: 0;
      top: 0;
      width: 375px;
      z-index: 40000;
  }

  &.slide-in {
      transition-duration: 75ms;
      transition-property: all;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  &.from-right {
      right: -24rem;

      &.open {
          right: 0;
      }
  }

  &.from-left {
      left: -24rem;

      &.open {
          left: 0;
      }
  }

  &-overlay {
      display: none;

      &.show {
          background-color: rgba(0, 0, 0, 0.2);
          content: '';
          display: block;
          height: 100%;
          left: 0;
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 1025;
      }
  }

  &-close {
      border-radius: 100%;
      width: 27.5px;

      &:focus {
          background: white !important;
      }
  }

  &-footer {
      position: fixed;
      margin: 0 -8px -4px;
      width: 374px;
      bottom: 0;
  }

  &-header {
      position: fixed;
      width: 375px;
      top: 0;
      z-index: 1;
  }
}
/* purgecss end ignore */