@use "../mixin";

.NavBar {
  display: flex;
  gap: 12px;
  justify-content: space-between;

  background-color: var(--md-sys-color-surface-container-low);

  user-select: none;
  -moz-user-select: none;
  z-index: 999;

  a {
    cursor: pointer;
    text-decoration: none;
  }

  .fab-container {
    .MaterialButton {
      margin-block: 24px 12px;
      margin-inline: 21px;
    }

    .fab {
      display: grid;
      align-items: center;
      justify-content: start;

      position: relative;

      margin-block-end: 24px;
      margin-inline: 20px;
      padding-inline: 0px;

      height: 56px;
      width: max-content;

      color: var(--md-sys-color-on-secondary-container);

      border: none;
      border-radius: var(--md-sys-shape-corner-large);

      background-color: var(--md-sys-color-secondary-container);

      cursor: pointer;
      transition:
        grid var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
        gap var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
      overflow: hidden;

      span {
        @include mixin.material-symbols();

        grid-column: 1 / 2;

        height: 24px;
        width: 56px;

        text-align: center;
        font-variation-settings:
          "FILL" 1,
          "wght" 300;

        transition: font-variation-settings var(--md-sys-motion-spring-fast-spatial-duration)
          var(--md-sys-motion-spring-fast-spatial);
      }

      p {
        grid-column: 2 / 3;

        width: max-content;

        color: var(--md-sys-color-on-secondary-container);

        user-select: none;
        -moz-user-select: none;
        pointer-events: none;
        transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
      }

      &:hover span {
        font-variation-settings:
          "FILL" 1,
          "wght" 600;
      }

      &:active span {
        font-variation-settings:
          "FILL" 1,
          "wght" 200;
      }
    }
  }

  .destinations {
    display: flex;

    transition: gap var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);

    .segment {
      position: relative;

      width: 100%;

      a {
        display: grid;
        align-items: center;
        justify-content: center;
        justify-items: center;

        position: relative;

        transition:
          grid var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
          gap var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);
      }

      .accent {
        display: flex;
        align-items: center;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        justify-content: center;

        position: relative;

        color: var(--md-sys-color-on-surface-variant);

        border-radius: var(--md-sys-shape-corner-full);

        overflow: hidden;
        transition:
          height var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
          width var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);
        z-index: 1;

        .icon {
          height: 24px;
          width: 24px;

          pointer-events: none;

          span {
            @include mixin.material-symbols();

            font-variation-settings:
              "FILL" 1,
              "wght" 300;

            transition: font-variation-settings var(--md-sys-motion-spring-fast-spatial-duration)
              var(--md-sys-motion-spring-fast-spatial);
          }
        }
      }

      .label {
        display: grid;
        justify-content: center;

        color: var(--md-sys-color-on-surface-variant);
        text-decoration: none;
        text-wrap-mode: nowrap;

        &.bottom {
          @include mixin.typescale-style("label-small");

          grid-row: 2 / 3;

          top: 0px;

          text-align: center;

          z-index: -1;
        }

        &.right {
          @include mixin.typescale-style("label-large");

          grid-column: 2 / 3;

          left: 0px;

          text-align: left;

          z-index: 1;
        }

        &.animating {
          animation: fade-out var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect) both;
        }
      }

      &::after {
        content: "";
        display: block;

        position: absolute;
        bottom: 0px;
        left: 0px;
        top: 0px;

        height: 32px;
        width: 56px;

        border-radius: var(--md-sys-shape-corner-full);

        pointer-events: none;
        transition:
          background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
          height var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
          width var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
        z-index: 0;
      }

      &.active {
        .accent {
          color: var(--md-sys-color-on-secondary-container);
        }

        .label {
          color: var(--md-sys-color-secondary);
        }

        &::after {
          background-color: var(--md-sys-color-secondary-container);
        }
      }

      &.inactive:hover::after {
        background-color: var(--md-sys-color-surface-container-high);
      }

      &.inactive .accent .icon span {
        font-variation-settings:
          "FILL" 0,
          "wght" 200;
      }

      &:hover .accent .icon span {
        font-variation-settings:
          "FILL" 1,
          "wght" 400;
      }

      &:active .accent .icon span {
        font-variation-settings:
          "FILL" 1,
          "wght" 200;
      }
    }
  }

  .actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;

    margin-block: 24px;

    width: 100%;

    @media screen and (max-width: 840px) {
      display: none;
    }
  }

  &.bar {
    flex-direction: row;

    position: absolute;
    bottom: 0px;

    height: 64px;
    width: 100%;

    overflow-y: hidden;

    .fab-container {
      display: none;
    }

    .destinations {
      align-items: center;
      flex-direction: row;
      justify-content: space-between;

      height: 100%;
      width: 100%;

      .segment {
        height: 100%;

        a {
          align-content: center;
          row-gap: 4px;

          height: 100%;
          width: 100%;
        }
      }
    }

    &.horizontal {
      .destinations {
        justify-content: center;
        gap: 12px;

        .segment {
          width: max-content;

          a {
            grid: max-content 0px / max-content max-content;
            row-gap: 0px;
            column-gap: 4px;

            height: 100%;
            width: max-content;

            padding-block: 12px;
            padding-inline: 12px 18px;
          }

          .accent {
            height: 32px;
            width: 32px;
          }

          .label {
            grid-column: 2 / 3;
            grid-row: 1 / 2;

            width: max-content;

            z-index: 1;
          }

          &::after {
            left: 0px;
            top: 12px;

            height: 40px;
            width: 100%;
          }

          @media screen and (max-width: 840px) {
            .label {
              @include mixin.typescale-style("label-large");
            }
          }
        }
      }
    }

    &.vertical {
      .destinations {
        .segment {
          width: 100%;

          a {
            padding-block: 4px;
          }

          .accent {
            height: 32px;
            width: 52px;
          }

          &::after {
            left: 50%;
            right: 50%;
            top: 6px;

            translate: -50%;
          }
        }
      }
    }
  }

  &.rail {
    align-items: flex-start;
    flex-direction: column;

    height: 100%;

    overflow-x: hidden;
    overflow-y: auto;
    transition: width var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);

    .destinations {
      flex-direction: column;
      flex-grow: 1;
      justify-content: flex-start;

      width: 100%;

      .segment {
        &.active .accent {
          background-color: transparent;
        }

        &::after {
          left: 20px;
        }
      }
    }

    &.collapsed {
      width: 96px;

      .fab-container {
        .fab {
          grid: auto / max-content 0px;
          gap: 0px;

          p {
            visibility: hidden;

            opacity: 0;
          }
        }
      }

      .destinations {
        gap: 10px;

        .segment {
          a {
            column-gap: 0px;
            grid: max-content 16px / max-content 0px;
            row-gap: 8px;

            padding-inline: 20px;

            &::after {
              height: 32px;
              width: 56px;
            }

            &:focus-visible {
              outline: none !important;

              .accent {
                @include mixin.focus-ring($thickness: 3, $offset: 2);
              }
            }
          }

          .accent {
            height: 32px;
            width: 56px;
          }

          .label {
            position: relative;

            width: 56px;
          }
        }
      }
    }

    &.expanded {
      width: 220px;
      max-width: 360px;

      .fab-container {
        .fab {
          grid: auto / max-content var(--label-width);
          gap: 4px;

          padding-inline-end: 24px;

          p {
            visibility: visible;
            opacity: 1;
          }
        }
      }

      .destinations {
        gap: 0px;

        .segment {
          a {
            column-gap: 4px;
            grid: max-content 0px / max-content var(--label-width);
            row-gap: 0px;

            margin-inline-start: 20px;
            padding-inline: 0px 24px;

            border-radius: var(--md-sys-shape-corner-full);

            overflow: hidden;
          }

          .accent {
            height: 56px;
            width: 56px;
          }

          .label {
            position: absolute;
          }

          &::after {
            height: 56px;
            width: calc(56px + 4px + var(--label-width) + 24px);
          }
        }
      }
    }

    @media screen and (max-width: 840px) {
      display: none;
    }
  }
}
