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

.LeftPanel {
  z-index: 65;
  display: flex !important;
  flex-direction: column;
  background-color: var(--panel-background);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  overflow: hidden;
  position: fixed;
  inset-inline-start: 0px;
  transition: transform 0.3s ease-in-out;
  max-width: calc(100% - 16px);

  @include mobile {
    max-width: 100%;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 100%;
    width: 100%;
    z-index: 95;
  }

  @include panel-height-fix;

  @include tablet {
    border-inline-end: 1px solid var(--side-panel-border);
  }

  &.closed {
    transform: translateX(-100%);
  }

  &.office-editor {
    .left-panel-container {
      padding: 0;
    }
  }

  .left-panel-container {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 0px 16px;

    @include mobile {
      padding-top: 0px;
      width: 100%;
      min-width: 100%;

      .close-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 64px;
        width: 100%;
        padding-inline-end: 5px;
        inset-block-start: 0;

        .close-icon-container {
          cursor: pointer;

          .close-icon {
            width: 24px;
            height: 24px;
          }
        }
      }
    }

    .left-panel-header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      margin-inline-start: $left-panel-header-margin-inline-start;
      margin-top: 0px;
      margin-inline-end: 8px;
    }
  }

  .Panel {
    @extend %sub-panel;
  }
}
