@import '~base/sass/base/variables';
@import '~base/sass/base/functions';

.header-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
}

a.header-nav__link, a.header-nav__link:not(.btn) {
  margin-right: calcRem(30);
  font-size: $base-font-size;
  font-weight: 600;
  color: pick-visible-color($primary-color, #fff, $base-text-color);
  text-decoration: none;
  position: relative;

  &:after {
    position: absolute;
    bottom: calcRem(-10);
    height: calcRem(2);
    width: 0;
    left: 0;
    background-color: pick-visible-color($primary-color, #fff, $base-text-color);
    content: '';
    transition: all 0.2s ease-in-out;
  }

  &:hover {
    color: pick-visible-color($primary-color, #fff, $base-text-color);

    &:after {
      width: 100%;
    }
  }

  &:focus {
    color: pick-visible-color($primary-color, #fff, $base-text-color);
  }

  &.active {
    font-weight: 900;
    opacity: 0.6;
  }
}
