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

.ma__decorative-link {

  @include ma-link-decorative;
  display: inline-block;
  width: 100%;

  a:hover {
    border-bottom-color: var(--mf-c-link);
  }

  a:focus {
    // important needed to overwrite the focus border color
    border-bottom-color: var(--mf-c-link) !important;
  }

  &--inverse {

    a {
      color: var(--mf-c-font-inverse);
    }

    a:hover {
      border-bottom-color: rgba($c-font-inverse,.5);
    }

    a:focus {
      // important needed to overwrite the focus border color
      border-bottom-color: rgba($c-font-inverse,.5) !important;
    }
  }

  &.button-link {
    outline: 1px solid rgba($c-font-link, 0.5);
    display: inline-block;
    width: auto;
    padding: .5rem 1.8rem .5rem .8rem;
    background-color: var(--mf-c-bg);

    &:hover,
    &:focus {
      outline: 1px solid rgba($c-font-link, 1);

      a {
        border-bottom-color: transparent;
      }
    }
  }

  &__details {
    font-weight: $fonts-light;
  }

  a {

    .ma__download-link--icon {
      top: 2px;
    }

    svg {
      margin-bottom: -1px;
    }
  }

}