/**
 * Icon links in the navbar
 */

.pst-navbar-icon {
  // Extra specificity needed for overrides
  html & {
    @include min-hit-area;
    @include link-style-block;

    display: flex;
    align-items: center;
    justify-content: center;

    // Bootstrap overrides
    border-radius: 0;
    border: none;
    font-size: 1rem;
    line-height: $line-height-body; // Override Boostrap, which defines a separate line-height for buttons
    padding: $navbar-link-padding-y 0; // Horizontal white space in nav bar between items is controlled via column gap rule on the container.

    // Make the navbar icon links have the same size as the navbar text links
    height: calc(2 * $navbar-link-padding-y + $line-height-body * 1rem);
  }
}

ul.navbar-icon-links {
  display: flex;
  flex-flow: row wrap;
  column-gap: $nav-icon-column-gap;
  justify-content: space-evenly;
  align-items: center;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;

  // Icons styling
  i {
    &.fa-brands,
    &.fa-regular,
    &.fa-solid {
      vertical-align: middle;
      font-style: normal;
      font-size: var(--pst-font-size-icon);
    }

    /* Social media buttons hard-code the brand color */
    &.fa-square-twitter::before {
      color: #55acee;
    }

    &.fa-square-gitlab::before {
      color: #548;
    }

    &.fa-bitbucket::before {
      color: #0052cc;
    }
  }

  // Force images to be icon-sized
  img.icon-link-image {
    height: 1.5em;
    border-radius: 0.2rem;
  }

  .fa-pydata {
    stroke: var(--pst-color-background);
    stroke-linejoin: round;
    stroke-width: 0.35;
  }
}
