$sidebar-width: 65px;

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

  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;
        border-top-color: #7367f0;
        padding-left: 4px;
      }

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

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

.app_service {
  width: 100vw;
  position: absolute;
  top: $sidebar-width;
  right: 0;
}

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

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

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