@import '../styles/theme.scss';

$drawer-content-width: 368px;

$timing-func: cubic-bezier(0.36, 0.66, 0.04, 1);

.at-drawer {
  position: fixed;
  z-index: $zIndexDrawer;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  &__mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.38);
    opacity: 0;
    transition: opacity 300ms $timing-func;
    z-index: #{$zIndexDrawer + 1};
  }

  &__content {
    position: fixed;
    top: 0;
    bottom: 0;
    width: $drawer-content-width;
    text-align: left;
    opacity: 0;
    overflow: auto;
    z-index: #{$zIndexDrawer + 2};

    background: $paletteBackgroundPaper;
    color: $paletteTextPrimary;

    &.dark {
      background: $paletteCommonBlack;
      color: $paletteTextPrimary2;
    }

    &.default {
    }
    &.inherit {
      color: inherit;
    }
    &.primary {
      color: $palettePrimaryMain;
    }
    &.secondary {
      color: $paletteSecondaryMain;
    }
    &.error {
      color: $paletteErrorMain;
    }
    &.success {
      color: $paletteSuccessMain;
    }
    &.warning {
      color: $paletteWarningMain;
    }
    &.progress {
      color: $paletteProgressMain;
    }

    &__list {
      display: flex;
      flex-direction: column;
      background: transparent;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;

      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);

      &.top {
        justify-content: flex-start;
      }
      &.middle {
        justify-content: center;
      }
      &.bottom {
        justify-content: flex-end;
      }
    }
  }

  &__wrapper {
    width: 100%;
  }

  &__list--title {
    padding: 0 #{$spacingUnit * 3}px;
  }

  &.at-drawer--left {
    .at-drawer__content {
      left: 0;
      transform: translateX(-100%);
    }
  }

  &.at-drawer--right {
    .at-drawer__content {
      right: 0;
      transform: translateX(100%);
    }
  }

  &.at-drawer--show {
    .at-drawer__content {
      opacity: 1;
      transform: translateX(0%);
    }
  }
}

@keyframes anim-show {
  100% {
    opacity: 1;
  }
}

@keyframes anim-hide {
  100% {
    opacity: 0;
  }
}