@use "../helpers/functions" as lib;
@use "../variables" as vars;

@mixin content-reset {

  table {
    @extend .table;
    color: var(--brand-secondary);
  }

  pre {
    position: relative;
  }

  img {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  ul,
  ol {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  ul > li:not(.breadcrumbs__crumb) {
    margin: 0 0 0 lib.rem(19);
    position: relative;
    list-style: disc;
  }

  ol > li {
    margin: 0 0 0 lib.rem(19);
    position: relative;
    list-style: decimal;
  }

  p, ul {
    margin-bottom: lib.rem(24);
  }

  p a:hover,
  ul a:hover {
    text-decoration: underline;
  }

  figure {
    text-align: center;
  }

  figcaption {
    margin-top: lib.rem(10);
    font-size: lib.rem(18);
    font-style: italic;
    line-height: lib.rem(32);
  }

  pre, pre span, pre code {
    font-size: lib.rem(16);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 400;
    line-height: lib.rem(24);
  }

  iframe {
    max-width: 100%;
  }
}

@mixin content-image {
  img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: lib.rem(14);
  }
}

@mixin transitionAll($ms) {
  -webkit-transition: all $ms ease;
  -ms-transition: all $ms ease;
  -o-transition: all $ms ease;
  -moz-transition: all $ms ease;
  transition: all $ms ease;
}

@mixin font-styles($size, $weight, $line-height, $color, $font-family) {
  font-family: $font-family;
  font-size: $size;
  font-style: normal;
  font-weight: $weight;
  line-height: $line-height;
  color: $color;
}

@mixin blog-font-styles($size, $weight, $line-height, $color) {
  @include font-styles($size, $weight, $line-height, $color, vars.$blog-font-family);
}

/* button's text have be contained in a span with class .text to properly work */
@mixin buttonHoverEffect ($hoverBackground, $hoverColor, $hoverBorderColor: none) {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  display: inline-block;
  overflow-x: hidden;
  @if($hoverBorderColor) {
    border-width: 1px;
  }

  &:before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    -moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -ms-transform: scale(0, 1);
    -webkit-transform: scale(0, 1) translate3d(0, 0, 0);
    transform: scale(0, 1);
    -ms-transform-origin: top right;
    -webkit-transform-origin: top right;
    transform-origin: top right;
  }

  &:hover::before {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
    transform: scale(1, 1);
    -ms-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    background: $hoverBackground;
    @if($hoverBorderColor) {
      border: 1px solid $hoverBorderColor;
    }
  }


  & .text, & .txt {
    position: relative;
    z-index: 1;
  }

  &:hover {
    .text, .txt {
      color:$hoverColor;
      transition: color 0.2s linear;
    }
  }
}

@mixin fixed-height-img($height, $width: auto) {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: $width;
    min-width:$width;
    height: $width;
    overflow: hidden;
    margin-bottom: 0;
    & > img {
      flex-shrink: 0;
      width: auto;
      min-width: 100%;
      min-height: 100%;
      max-width: none;
      max-height: 100%;
    }
}