/**
 * Print a media query based on the value
 * @param {String} $breakpoint - Breakpoint
 * @require $breakpoints
 */
@mixin respond-to($key) {
  @if map-has-key($breakpoints, $key) {
    @media #{inspect(map-get($breakpoints, $key))} {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$key}`. "
    + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

@mixin grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-gap: 15px;
}

@mixin fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@mixin ci-websites {
  background: linear-gradient(
    225deg,
    color('robins-egg') 0%,
    color('blue-ribbon') 75%
  );
  color: color('white');

  svg {
    fill: currentColor;
  }
}

@mixin ci-stories {
  background: linear-gradient(
    225deg,
    color('clementine') 0%,
    color('school-bus') 75%
  );
  color: color('charade');

  svg {
    fill: currentColor;
  }
}

@mixin ci-ads {
  background: linear-gradient(
    225deg,
    color('lav-magenta') 0%,
    color('electric-violet') 75%
  );
  color: color('white');

  svg {
    fill: currentColor;
  }
}

@mixin ci-e-mails {
  background: linear-gradient(
    225deg,
    color('japan-laurel') 0%,
    color('confetti') 75%
  );
  color: color('charade');

  svg {
    fill: currentColor;
  }
}

@mixin scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: color('oslo-gray');
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}

@mixin unset-button {
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
}

@mixin shadow-large {
  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.15);
}

@mixin shadow-small {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}
