////
/// @group link
////

@import '~@react-md/theme/dist/helpers';
@import '~@react-md/states/dist/mixins';
@import '~@react-md/typography/dist/mixins';
@import '~@react-md/utils/dist/mixins';
@import './functions';
@import './variables';

/// Creates the styles for one of the link's theme values. This is mostly going
/// to be an internal helper mixin util.
///
/// @param {String} property - The property to set a `rmd-link-theme-values`
/// value to.
/// @param {String} theme-style [property] - One of the keys of
/// `rmd-link-theme-values` to extract a value from.
/// @param {Color|String|Number} fallback [null] - A fallback value to use if
/// the css variable isn't set somehow. This will default to automatically
/// retrieving the default value from the `rmd-link-theme-values` map when
/// `null`.
@mixin rmd-link-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-link-theme-values,
    link
  );
}

/// Updates one of the link's theme variables with the new value for the section
/// of your app.
///
/// @param {String} theme-style - The link theme style type to update. This
/// should be one of the `$rmd-link-theme-values` keys.
/// @param {Color|String|Number} value - The new value to use.
@mixin rmd-link-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-link-theme-values,
    link
  );
}

@mixin rmd-link {
  @include rmd-link-theme(color);
  @include rmd-typography-base;

  @if $rmd-states-use-focus-shadow {
    // Can't use the normal states focus shadow behavior since links are
    // rendered inline.  The pseudo selectors with different shadows only work
    // nicely with block elements.
    @include rmd-utils-keyboard-only {
      &:focus {
        outline: $rmd-states-focus-shadow-width solid
          $rmd-states-focus-shadow-color;
      }
    }
  } @else {
    @include rmd-utils-hide-focus-outline;
  }

  transition: color $rmd-link-transition-time;

  &--flex-centered {
    align-items: center;
    display: inline-flex;
  }

  &:visited {
    @include rmd-link-theme(color, visited-color);
  }

  &:hover {
    @include rmd-link-theme(color, hover-color);
  }
}

@mixin rmd-link-skip {
  @include rmd-typography-value(
    headline-6,
    font-size,
    font-weight,
    letter-spacing
  );
  @include rmd-utils-sr-only(true, null);
  @include rmd-utils-hide-focus-outline;

  z-index: $rmd-link-skip-z-index;

  &--styled {
    @include rmd-utils-map-to-styles($rmd-link-skip-styles);

    @include rmd-utils-keyboard-only {
      &:focus,
      &:active {
        @include rmd-utils-map-to-styles($rmd-link-skip-active-styles);
      }
    }
  }
}

/// Creates the styles for links within react-md.
@mixin react-md-link {
  @include rmd-theme-create-root-theme($rmd-link-theme-values, link);

  .rmd-link {
    @include rmd-link;
  }

  .rmd-link-skip {
    @include rmd-link-skip;
  }
}