src/constants/panel.scss
@import './styles';

%panel {
  // position: fixed;
  z-index: 65;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, visibility 0s 0.3s ease;

  @include mobile {
    inset-block-start: 0px;
    width: 100%;
    height: 100%;
  }

  &.open {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s ease 0s;
  }

  .empty-panel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 36px;
    gap: 8px;

    .empty-icon {
      width: 60px;
      height: 60px;
      color: var(--gray-6);
      fill: var(--gray-6);

      svg {
        width: 60px;
        height: 60px;
      }
    }

    .empty-message {
      text-align: center;
      max-width: 131px;
      font-size: 13px;

      @include tablet-and-desktop {
        line-height: 15px;
      }
    }
  }
}

@mixin closed($translate) {
  &.closed {
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s ease 0.3s;
    transform: $translate;

    @include mobile {
      transform: translateY(100%);
    }
  }
}

%right-panel {
  @extend %panel;
  padding-top: 16px;
  padding-inline-start: 16px;
  padding-bottom: 0px;
}

%left-panel {
  @extend %panel;
}

%sub-panel {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  flex-direction: column;
}

%center-of-panel {
  margin: auto 0;
  align-self: center;
}
