@import './globals.scss';
@import './config.scss';

$sidebar-width: 75px;
$sidebar-bias: 28px;
$tabitem-bias: 30px;

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

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

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

  .tabs {
    flex-direction: row;

    .tab-item {
      &.is-active {
        border-left-width: 0px !important;
        border-top-width: 4px;
        border-top-style: solid;
        overflow: hidden;
        height: $sidebar-width + 4;
      }

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

      &.is-label-enabled {
        min-width: 70px;
        max-width: 140px;
        height: $sidebar-width + 10;
        width: max-content !important;
        overflow: hidden;
        padding-left: 4px;
        padding-right: 4px;
        padding-top: 8px;
      }

      .tab-item__icon {
        margin-left: 0;
      }
    }
  }
  div {
    overflow: hidden !important;
  }

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

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

.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, 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 + $sidebar-bias;

  .sidebar__button--workspaces.is-active {
    height: $sidebar-width - $sidebar-bias;
  }
  .tab-item .is-label-enabled {
    height: $sidebar-width + $tabitem-bias;
  }
}