@use 'sass:map';
@use '../../../mx-core/src/base/colors';
@use '../../../mx-core/src/base/opacity';

@mixin mx-hyperlink-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  .mx-hyperlink {
    color: map.get($color-theme, primary);
    background: none;
    border: none;
    text-decoration: underline;
    padding: 0;

    &:hover {
      cursor: pointer;
    }

    &-small {
      @extend .gl-body-sm;
      .mat-icon {
        width: 12px;
        height: 12px;
      }
    }

    &-medium {
      @extend .gl-body-md;
      .mat-icon {
        width: 14px;
        height: 14px;
      }
    }

    &-large {
      @extend .gl-body-lg;
      .mat-icon {
        width: 16px;
        height: 16px;
      }
    }

    &-other {
      font-weight: inherit;
      font-size: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      color: inherit;
    }
  }
}