.navbar {
  background-color: var(--mantine-primary-color-filled);
  min-height: rem(100vh);
  padding: var(--mantine-spacing-md);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  border-right: rem(1px) solid light-dark(
    var(--mantine-primary-color-filled-hover),
    var(--mantine-color-dark-4)
  );

  @mixin light {
    background-color: var(--mantine-primary-color-filled);
  }

  @mixin dark {
    background-color: var(--mantine-color-dark-7);
  }

  &[data-sidebar-state="full"] {
    width: rem(300px);

    @media (max-width: $mantine-breakpoint-md) {
      width: 100%;
    }

    @media (max-width: $mantine-breakpoint-sm) {
      width: 100%;
    }
  }

  &[data-sidebar-state="mini"] {
    width: rem(60px);
    padding: var(--mantine-spacing-xs);

    .linkLabel, .chevron {
      display: none;
    }

    .link {
      padding: var(--mantine-spacing-xs);
      border-radius: var(--mantine-radius-sm);
      margin-bottom: var(--mantine-spacing-xs);
    }

    .icon {
      margin-right: 0;
    }
  }

  &[data-sidebar-state="hidden"] {
    width: 0;
    padding: 0;
    overflow: hidden;
  }

  @media (max-width: $mantine-breakpoint-md) {
    width: 100%;
  }
}

.header {
  padding: 0 var(--mantine-spacing-md) var(--mantine-spacing-sm) var(--mantine-spacing-md);
  margin-left: calc(var(--mantine-spacing-md) * -1);
  margin-right: calc(var(--mantine-spacing-md) * -1);
  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
  color: var(--mantine-color-white);
}

.logo {
  /*@mixin light {*/
  /*  color: var(--mantine-color-white);*/
  /*}*/

  /*@mixin dark {*/
  /*  color: var(--mantine-color-black);*/
  /*}*/
}

.links {
  flex: 1;
  margin-left: calc(var(--mantine-spacing-md) * -1);
  margin-right: calc(var(--mantine-spacing-md) * -1);
}

.linksInner {
  padding-top: var(--mantine-spacing-xl);
  padding-bottom: var(--mantine-spacing-xl);

  &[data-sidebar-state="mini"] {
    padding-top: 0;
  }
}

.linkHeader {
  font-weight: 500;
  color: light-dark(var(--mantine-color-white), var(--mantine-color-gray-3));
}

.footer {
  margin-left: calc(var(--mantine-spacing-md) * -1);
  margin-right: calc(var(--mantine-spacing-md) * -1);
  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
  color: var(--mantine-color-white);
}
