@use '../../variables' as *;

body {
  --nav-item-color: var(--color-neutral-80);
  --nav-item-color-hover: var(--color-neutral-90);
  --nav-item-color-pressed: var(--color);
  --nav-item-background-pressed: var(--color);
}
.main {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;

  &:last-child {
    margin-bottom: 0;
  }

  @keyframes fade-in {
    to {
      opacity: 1;
    }
  }

  &.hasRightButtons {
    .link {
      padding-right: 4px;
    }
  }

  &:hover,
  &.expanded {
    .rightButtons {
      display: block;
      opacity: 1;
    }
  }

  &::before {
    position: absolute;
    content: '';
    display: block;
    height: 16px;
    width: 4px;
    border-radius: var(--border-radius-tiny);

    margin: 8px 0 8px 0;
    pointer-events: none;
    transform: translateX(-20px);
    opacity: 1;
    transition: all 0.2s ease-out;
  }

  &.active {
    & > .linkContainer {
      background: var(--color-surface-1);
    }

    &::before {
      background: var(--color-accent-30);
      transform: translateX(-8px);
      opacity: 1;
    }

    .linkContainer,
    .link {
      color: var(--color-neutral-100);
    }
  }

  .linkContainer {
    border-radius: var(--border-radius-small);
    color: var(--nav-item-color);
    text-align: left;
    background-color: transparent;

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 1px solid var(--color-neutral-100);
    }
  }
  .link {
    border-radius: var(--border-radius-small);
    min-height: $size-base;
    color: var(--nav-item-color);
    text-align: left;
    background-color: transparent;
    padding: 0 $space-xs;

    &:hover {
      background: var(--color-surface-1);
      color: var(--nav-item-color-hover);
      .overflowMenu {
        opacity: 1;
        display: flex;
      }

      .dragIcon {
        opacity: 1;
      }
    }
  }

  .rightContent {
    pointer-events: none;
    //position: absolute;
    right: 0;
    top: auto;
    //padding-right: 8px;
    button,
    a {
      pointer-events: all;
    }
  }

  @each $name, $color in $colors {
    .#{$name} {
      color: $color;
    }
  }
  .overflowMenu {
    opacity: 0;
    display: none;
  }

  .subLink {
    .link {
      color: var(--nav-item-color);
    }
    .main {
      margin: 0;
      .subLink {
        .linkIcon {
          margin-left: 30px;
        }
      }
      &.active {
        .link {
          color: var(--color-neutral-100);
        }
        &::before {
          opacity: 0;
        }
      }
    }
  }
}

.label {
  min-width: 0;
}

.rightButtons {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.dragIcon {
  opacity: 0;
  position: absolute;
}