/**
*
* Makes working with themeable CSS variables easier.
*
* $property: the CSS property to theme.
* $cssVariable: The CSS variable that will store the themed value.
* $fallback: The value to use as a fallback but as well for the CSS variable default value.
*/
@mixin themeable($property, $cssVariable, $fallback) {
  #{$property}: #{$fallback};
  #{$property}: var(--#{$cssVariable}, #{$fallback});
}

/* Mixin for a load more wrapper, made by a container div and child button */
@mixin load-more() {
  text-align: center;

  button {
    background: transparent;
    border: 1px solid var(--card-color-tertiary);
    font-size: 17px;
    padding: 14px 5px;
    margin: 40px auto 70px;
    width: 320px;
    max-width: 80%;
    border-radius: 100px;
    font-weight: bold;
    color: inherit;
  }
}

// Card styling
@mixin dev-card {
  background: var(--card-bg);
  @include themeable(border, theme-container-border, none);
  @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);

  @media screen and (min-width: 950px) {
    border-radius: var(--radius);
    margin-bottom: var(--su-2);
  }
}

// Sidebar links
@mixin sidebar-link {
  display: block;
  padding: 8px 16px;
  margin: 0 -16px;
  border-radius: var(--radius);
  color: var(--link-color);

  &:hover {
    color: var(--link-color-hover);
    background: var(--link-bg-hover);
  }
}

/**
*
* Generates the src property for @font-face. The mixin is required
* so that webpack for Storybook and the application can both
* generate the font URL correctly.
*
* $font: the font file name, e.g. 'OpenDyslexic-Regular.otf'
*/
@mixin font-src($font) {
  @if variable-exists(environment) and $environment == 'storybook' {
    src: '/fonts/' + $font;
  } @else {
    src: font-url($font);
  }
}
