@use "ma-visually-hidden" as *;

@use "00-base/_variables" as *;

@mixin ma-skip-link {

  .ma__rich-text &__skip-link,
  &__skip-link {
    margin: -8px 0 2px 0;
    padding: 0 10px 2px 10px;
    float: left;
    display: block;
    border-bottom: 0; // Reset the link underline from .ma__rich-text a.
    font-size: $fonts-medium;
    transition: none;

    &:hover {
      border: none;
    }

    &:not(:focus) {

      @include ma-visually-hidden;
    }
  }

  &__skip-link_target {
    z-index: -3;

    a {
      display: none;
      padding: 0 10px;
      font-size: $fonts-medium;
      font-weight: $fonts-bold;

      border-bottom: 0;
      transition: none;

      &.visible {
        display: block;
        scroll-margin-top: 80px;
      }
    }
  }
}