@import './config.scss';

$sidebar-width: 64px;

.sidebar {
  width: 100vw;
  height: $sidebar-width;
  flex-direction: row;
  position: absolute;
  top: 0;
  right: 0;
  padding-bottom: 0px;

  &::after {
    top: -10px;
    right: -10px;
    bottom: 0;
    left: -10px;
    clip-path: inset(10px 10px 0 10px);
  }

  div:first-of-type {
    overflow-x: scroll;
    width: 100%;
  }

  .tabs {
    flex-direction: row;

    .tab-item {
      
      &.is-active {
        border-left-width: 0px;
        border-top-width: 4px;
        border-top-style: solid;
        padding-left: 4px;
      }

      &:not(.is-active) {
        padding-top: 4px;
      }
    }
  }

  .sidebar__button--workspaces.is-active {
    position: absolute;
    right: 300px;
    height: 100%;
    background-color: #f7f7f9;
  }
}

.app .app__content {
  padding-top: $sidebar-width;
}

.workspaces-drawer {
  margin-top: -$sidebar-width;
  height: 100vh;
  position: relative;

  &::after {
    content: ' ';
    position: absolute;
    top: -10px;
    right: 0;
    bottom: -10px;
    left: -10px;
    z-index: 1000;
    pointer-events: none;
    clip-path: inset(10px 0 10px 10px);
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .12),
                inset 0 0 2px 0 rgba(0, 0, 0, 0.36);
  }
}

.theme__dark {
  .sidebar .sidebar__button--workspaces.is-active {
    background-color: #2d2f31;
  }

  .workspaces-drawer::after {
    box-shadow: inset 0 0 10px 0 $dark-theme-black,
                inset 0 0 2px 0 rgba(0, 0, 0, 0.4);
  }
}

.darwin .sidebar {
  height: $sidebar-width + 22px;

  .sidebar__button--workspaces.is-active {
    height: $sidebar-width - 22px;
  }
}