@import "../../vars.scss";

ul {
  list-style: none;

  display: flex;
  justify-content: center;
  gap: 3rem;
  height: 6rem;
  width: 100%;

  li {
    align-content: center;
    font-size: 1.5rem;
  }
}

a {
  text-decoration: none;
  color: var(--text-color);
}

svg {
  display: none;
}

@media only screen and (max-width: $small-screen) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    width: fit-content;
    height: fit-content;
    top: 5rem;
    z-index: 200;
    max-height: 0;
    transition: max-height 0.5s ease;
    overflow: hidden;
    gap: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;

    &.collapsed {
      max-height: 10rem;
      transition: max-height 0.5s ease;
      overflow: hidden;
    }

    li {
      background-color: var(--background-color);
      z-index: 200;
      height: 3rem;
      width: 100%;
    }

    a {
      padding: 1rem;
    }
  }

  svg {
    display: inline;
    height: 4rem;
    width: 100%;
    margin: 1rem;
  }

  path {
    fill: var(--accent-color);
  }
}