// Hydrogen / Component / Styles

// This reset mixin is used to specify component level style resets if they're needed. These styles only apply to the versioned instance of the component.
@mixin h2-component-skip-to-content-reset() {}

// This mixin specifies generic styles that apply to all variations/combinations of this component.
@mixin h2-component-skip-to-content-generic(
  $font
) {
  display: block;
  font-family: $font;
  height: 1px;
  position: absolute;
  top: -100vh;
  left: -100vw;
  text-align: center;
  width: 1px;

  &:focus {
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
  }

}

// Load your custom mixins here.
@mixin h2-component-skip-to-content-color(
  $color
) {
  background-color: rgba($color, .2);
  color: $color;
}