@use '../common/colours';
@use '../common/responsive';
@use '../common/accessibility';
@use '../common/typography';
@use '../common/layout';

.settings {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: layout.$max-page-width;
  width: 100%;

  @include responsive.respond-to(tablet, desktop) {
    display: grid;
    grid-template-columns: 25% 1fr;
  }
}

.nav {
  background-color: colours.$off-black;
  color: colours.$white;
}

.toggleMenu {
  background-color: colours.$off-black;
  border: none;
  color: colours.$white;
  margin: 0 layout.$outline-size;
  padding: 1em calc(1em - #{layout.$outline-size * 2});
  text-align: left;
  width: calc(100% - #{layout.$outline-size * 2});

  @include accessibility.interactive(
    $color: colours.$white,
    $background-color: colours.$off-black,
    $border-color: transparent
  );

  @include responsive.respond-to(tablet, desktop) {
    display: none;
  }
}

.menuOpen {
  display: block;
}

.menuClosed {
  display: none;

  @include responsive.respond-to(tablet, desktop) {
    display: block;
  }
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;

  @include responsive.respond-to(tablet, desktop) {
    position: sticky;
    top: 0;
  }
}

.link {
  color: colours.$white;
  display: inline-block;
  padding: 1em;
  text-decoration: none;
  width: 100%;

  &:visited {
    color: colours.$white;
  }

  &:not(.activeLink) {
    @include accessibility.interactive(
      $color: colours.$white,
      $background-color: colours.$off-black,
      $border-color: transparent
    ) {
      outline-offset: -#{layout.$outline-size};
    }
  }

  @include responsive.respond-to(tablet, desktop) {
    padding: 1em 1em 1em 2em;
  }
}

.activeLink {
  background-color: colours.$white;
  color: colours.$off-black;

  &:visited {
    color: colours.$off-black;
  }

  &:hover,
  &:focus {
    background-color: colours.$white;
    color: colours.$off-black;
    outline-offset: -#{layout.$outline-size};
  }
}
