@use "pix-design-tokens/typography";

.pix-navigation-button {
  @extend %pix-body-s;

  position: relative;
  display: flex;
  gap: var(--pix-spacing-2x);
  align-items: center;
  width: max-content;
  width: 100%;
  padding: var(--pix-spacing-2x) var(--pix-spacing-3x);
  font-weight: 400;
  // stylelint-disable-next-line custom-property-pattern
  font-family: var(--_pix-font-family-title);

  &:focus::before,
  &:focus-visible::before,
  &.active::before,
  &:hover::before {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentcolor;
    border-radius: var(--pix-spacing-2x);
    content: '';
  }

  &:hover::before {
    opacity: .3;
  }

  &:focus, &:focus-visible {
    border-radius: var(--pix-spacing-2x);
    outline: 1px solid currentcolor ;

    &::before{
      opacity: .3;
    }
  }

  &:active::before {
    opacity: .5;
  }

  &.active::before {
    opacity: .2;
  }

  &.active {
    font-weight: var(--pix-font-bold);
  }

}

.pix-navigation-button__external-icon {
  width: 1rem;
}