@import "import";

.footer {
  position: fixed;
  bottom: 0;
  @include flex(row);
  background-color: color(transparent);
  color: color(gray-500);
  width: 100%;
  height: var(--footer-height);
  z-index: var(--z-index-0);
  white-space: nowrap;
  opacity: 0.6;

  .navList {
    @include flex(row);
  }

  .navList ul {
    @include flex(row);

    @include breakpoint(small) {
      flex-direction: row;
    }
  }

  li {
    @include flex;
  }

  .navLink,
  .copyright {
    @include type-item(small);
    text-align: center;
    font-size: 12px;
    color: color(black);
    padding: 5px;
  }

  .navLink {
    text-decoration: underline;

    &:hover {
      color: color(text);
      text-decoration: none;
    }
  }

  .sunoLink {
    position: relative;
    margin-left: 0.4em;
    padding: 5px;
  }

  .navLink,
  .sunoLink {
    &:focus-visible {
      outline: 2px solid color(white);
    }
  }
}