// Borders
@function _border($element, $border-style, $border-color) {
  @return var(#{$element}-style, $border-style)
    var(#{$element}-color, $border-color);
}
// Use this mixin to set component border properties: width, style, color.
// width can set all position e.g. 0 0 1px 0 for bottom border only.
@mixin border($element, $border-width, $border-style, $border-color) {
  border: var(#{$element}, _border($element, $border-style, $border-color));
  border-width: var(#{$element}-width, $border-width);
}
// Use this mixin to set component background properties: color, image, position, size
@mixin background(
  $element,
  $color: transparent,
  $image: url(""),
  $position: 0% 0%,
  $size: cover
) {
  background: var(
    #{$element},
    var(#{$element}-image, $image) var(#{$element}-color, $color) no-repeat
      var(#{$element}-position, $position)
  );
  background-size: var(#{$element}-size, $size);
}

@function _box-shadow(
  $element,
  $shadow-h-offset,
  $shadow-v-offset,
  $shadow-blur,
  $shadow-spread,
  $shadow-color
) {
  @return var(#{$element}-h-offset, $shadow-h-offset)
    var(#{$element}-v-offset, $shadow-v-offset)
    var(#{$element}-blur, $shadow-blur) var(#{$element}-spread, $shadow-spread)
    var(#{$element}-color, $shadow-color);
}

@mixin box-shadow(
  $element,
  $h-offset,
  $v-offset,
  $blur,
  $spread,
  $color,
) {
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: var(
      #{$element}-transition,
      opacity var(#{$element}-transition-opacity-duration, 200ms)
        var(#{$element}-transition-opacity-timing-function, ease-in-out), box-shadow var(#{$element}-transition-box-shadow-duration, 200ms)
        var(#{$element}-transition-box-shadow-timing-function, ease-in-out)
    );
    opacity: var(#{$element}-opacity);
    box-shadow: var(#{$element}, _box-shadow($element, $h-offset, $v-offset, $blur, $spread, $color));
    will-change: opacity, box-shadow;
  }
}

.display-none {
  display: none;
}