@import '@/styles/theme.scss';

.wrapper {
  --navigator-width: var(--space-8);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.container {
  min-height: calc(100vh - var(--breadcrumb-height));
}

.navigator {
  width: var(--navigator-width);
  border-right: solid 1px var(--gray-3);
  padding: var(--space-1) 0;
  background-color: var(--gray-1);
}

.breadcrumbs {
  background-image: linear-gradient(
    to bottom,
    var(--color-panel-solid),
    85%,
    transparent
  );
}

.tab-button {
  display: flex;
  width: var(--space-8);
  padding: var(--space-1) var(--space-2);
  gap: var(--space-1);
  color: var(--gray-8);
  transition: color 100ms;
  align-items: center;
  cursor: pointer;
  &:global(.active),
  &:hover {
    color: var(--gray-11);
  }
}

.tab-button-inner {
  border-radius: var(--radius-3);
  transition: background-color 300ms;
  .tab-button:global(.active) & {
    background-color: var(--gray-4);
  }
}

.fading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--color-background), transparent);
}

.online-indicator {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: var(--space-1);
  height: var(--space-1);
  border-radius: 999px;
  background-color: var(--gray-8);
  &[data-active="true"] {
    background-color: var(--grass-8);
  }
}
