dotfiles

@import "variables";

@mixin menu {
  background: var(--background);
  border: 2px solid;
  border-radius: $corner-radius;
  list-style: none;
  margin: 0;
  padding: 10px;
  z-index: 99;
}

.header {
  display: flex;
  flex-direction: column;
  position: relative;

  &-inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  &-logo {
    display: flex;
    flex: 1;

    &:after {
      background: linear-gradient(
        90deg,
        var(--accent) 0% 12%,
        transparent 12% 50%,
        var(--accent-secondary) 50% 62%,
        transparent 62%
      );

      background-position: left center;
      background-repeat: repeat-x;
      background-size: 40px 100%;
      content: "";
      display: block;
      margin: 0px 0px 0px 10px;
      width: 100%;

      @media (max-width: $phone-max-width) {
        margin: 0px 15px 0px 10px;
      }
    }

    a {
      flex: 0 0 auto;
      max-width: 100%;
      text-decoration: none;

      &:focus {
        outline: dotted 2px var(--color);
      }
    }
  }

  a {
    font-weight: bold;
  }

  .menu {
    &-desktop {
      margin-top: 10px;

      @media (max-width: $phone-max-width) {
        display: none;
      }
    }

    &-mobile {
      @media (min-width: ($phone-max-width + 1px)) {
        display: none;
      }

      @media (max-width: $phone-max-width) {
        @include menu;
        position: absolute;
        padding-top: 15px;
        right: 0;
        top: 50px;
      }
    }

    &-inner {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 0;

      &-desktop {
        @media (max-width: $phone-max-width) {
          display: none;
        }
      }

      &-mobile {
        display: none;

        @media (max-width: $phone-max-width) {
          display: block;
        }
      }

      li {
        &.active {
          color: var(--accent-alpha-70);
        }

        &:not(:last-of-type) {
          margin-right: 20px;
          flex: 0 0 auto;
        }
      }

      @media (max-width: $phone-max-width) {
        align-items: flex-start;
        flex-direction: column;
        padding: 0;

        li {
          padding: 5px;
          margin: 0;
        }
      }

      &-list {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;

        &:not(:only-child) {
          margin-left: 20px;
        }

        &-more {
          @include menu;
          left: 0;
          top: 35px;

          &-trigger {
            background: none;
            border: none;
            font: inherit;
            color: var(--accent-secondary);
            cursor: pointer;
            margin: 0;
            user-select: none;
          }

          li {
            margin: 0;
            padding: 5px;
            white-space: nowrap;
          }
        }
      }
    }

    &-trigger {
      background: none;
      font: inherit;
      cursor: pointer;
      display: none;

      @media (max-width: $phone-max-width) {
        display: inherit;
      }

      &:focus {
        outline: dotted 2px var(--color);
      }

      &-button {
        border: 2px solid;
        border-radius: $corner-radius;
        color: var(--accent-secondary);
        height: 100%;
        padding: 6px 8px;
        position: relative;
        user-select: none;
      }
    }
  }
}