@use "../../../styles/base/utilities";

[data-fs-navbar-links] {
  // --------------------------------------------------------
  // Design Tokens for Navbar Links
  // --------------------------------------------------------

  --fs-navbar-links-bkg-color                        : var(--fs-color-body-bkg);

  --fs-navbar-links-transition-property              : var(--fs-transition-property);
  --fs-navbar-links-transition-timing                : var(--fs-transition-timing);
  --fs-navbar-links-transition-function              : var(--fs-transition-function);

  --fs-navbar-links-border-top-width-mobile          : var(--fs-border-width);
  --fs-navbar-links-border-top-color-mobile          : var(--fs-border-color-light);
  --fs-navbar-links-border-bottom-width-mobile       : var(--fs-navbar-links-border-top-width-mobile);
  --fs-navbar-links-border-bottom-color-mobile       : var(--fs-navbar-links-border-top-color-mobile);

  // Link
  --fs-navbar-links-link-width-notebook              : auto;
  --fs-navbar-links-link-padding-notebook            : 0 var(--fs-spacing-0);

  // List
  --fs-navbar-links-list-padding-left-notebook       : var(--fs-spacing-3);
  --fs-navbar-links-list-margin-left-notebook        : var(--fs-spacing-2);
  --fs-navbar-links-list-border-left-width-notebook  : var(--fs-border-width);
  --fs-navbar-links-list-border-left-color-notebook  : var(--fs-border-color-light);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  position: relative;
  background-color: var(--fs-navbar-links-bkg-color);
  transition: var(--fs-navbar-links-transition-property) var(--fs-navbar-links-transition-timing) var(--fs-navbar-links-transition-function);

  @include utilities.media("<notebook") { padding: 0; }

  [data-fs-navbar-links-wrapper] {
    @include utilities.media(">=notebook") {
      display: flex;
      align-items: center;
    }
  }

  [data-fs-navbar-links-list] {
    display: block;
  }

  [data-fs-navbar-links-list-item] {
    display: flex;
    align-items: center;
  }

  [data-fs-button] {
    margin-left: calc(-1 * var(--fs-spacing-1));

    // TODO: remove this after navbar 2.0 is implemented
    &[data-fs-button-variant="tertiary"] [data-fs-button-wrapper] {
      color: var(--fs-color-text-display);
    }

    @include utilities.media("<notebook") {
      display: none;
    }
  }

  @include utilities.media(">=notebook") {
    [data-fs-navbar-links-list] {
      position: relative;
      display: flex;
      column-gap: var(--fs-spacing-3);
      align-items: center;
      padding-left: var(--fs-navbar-links-list-padding-left-notebook);
      margin-left: var(--fs-navbar-links-list-margin-left-notebook);

      &::before {
        position: absolute;
        left: calc(-1 * var(--fs-spacing-1));
        width: var(--fs-navbar-links-list-border-left-width-notebook);
        height: 60%;
        content: "";
        background-color: var(--fs-navbar-links-list-border-left-color-notebook);
      }
    }

    [data-fs-navbar-links-list-item] > [data-fs-link] {
      width: var(--fs-navbar-links-link-width-notebook);
      padding: var(--fs-navbar-links-link-padding-notebook);
    }
  }

  @include utilities.media("<notebook") {
    border-top: var(--fs-navbar-links-border-top-width-mobile) solid var(--fs-navbar-links-border-top-color-mobile);
    border-bottom: var(--fs-navbar-links-border-bottom-width-mobile) solid var(--fs-navbar-links-border-bottom-color-mobile);
  }
}