@use '../../../scss/base/mixins' as *;
@use '../../../scss/base/variables' as var;

.link {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  color: var(--purple);
  text-transform: uppercase;
  position: relative;
  display: block;
  width: 100%;
  transition: all 0.15s ease-in-out;
  &::before {
    width: calc(100% + 75px);
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: -72px;
    background: linear-gradient(90deg, var(--light-gray), var(--lighter-gray));
    padding-left: 55px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
  }
  .sidebarLinkIcon {
    svg {
      circle,
      rect,
      path {
        // This is a fix for some icons that have a stroke width that is too thick
        stroke-width: 0.2px;
      }
    }
    &:global(.clockDollar),
    &:global(.packageExport) {
      svg path {
        fill: none !important;
        stroke-width: 1px;
      }
    }
  }

  &:hover {
    color: var(--blue);
    .sidebarLinkNewIcon {
      color: var(--dark-purple);
      svg {
        circle,
        rect,
        path {
          fill: var(--blue);
        }
      }

      &:global(.clockDollar),
      &:global(.packageExport) {
        svg path {
          fill: none;
          stroke: var(--blue);
        }
      }
    }
  }

  &.active {
    color: var(--dark-purple);
    font-weight: var(--font-weight-bold);
    z-index: 1;
    &::before {
      opacity: 1;
    }
    .sidebarLinkNewIcon {
      svg {
        circle,
        rect,
        path {
          fill: var(--dark-purple);
          stroke: var(--dark-purple);
        }
      }
      &:global(.clockDollar),
      &:global(.packageExport) {
        svg path {
          fill: none !important;
          stroke: var(--dark-purple);
        }
      }
    }

    .sidebarLinkIcon {
      svg {
        circle,
        rect,
        path {
          fill: var(--dark-purple);
          stroke: var(--dark-purple);
        }
      }
    }
  }
}

.innerContainer {
  display: flex;
  align-items: center;
  height: 48px;
  position: relative;
  gap: 16px;
  left: 16px;
  @media only screen and (min-width: var.$breakpoint-md) {
    left: 24px; /** This is needed to center the SidebarLink when the Sidebar is collapsed. */
  }
  &.expanded {
    .text {
      display: block;
    }
  }
}

.textContainer {
  overflow: hidden;
}

.text {
  display: none;
  // TODO: temporary until we complete the Tailwind conversion
  animation-duration: 0.3s !important;
}