@use 'variables' as *;
@use '@storyblok/design-tokens/tokens/scss/index' as *;

@mixin avatarComponent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 100%;
}

@mixin avatarComponentSize($size) {
  width: $size;
  height: $size;
}

@mixin generalBoxShadow() {
  z-index: 99999;
  background: $bg-white;
  border: $base-border;
  border-radius: $s-1;
  box-shadow: $box-shadow-default;
}

@mixin middleXY {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// creates a box-shadow and a border for general suspense menu components
@mixin popoverComponent {
  overflow: hidden;
  border: 1px solid $sb-color-border-primary;
  border-radius: $base-border-radius;
  box-shadow: $box-shadow-default;
}

// the following are the recommended styles for visually hiding content that will be read by a screen reader
@mixin screenReaderOnly {
  position: absolute;
  left: -10000px;
  top: auto;
  overflow: hidden;
  width: 1px;
  height: 1px;
}

// centers all of the child elements using flex approach
@mixin flexCentering {
  display: flex;
  align-items: center;
  justify-content: center;
}

// reset all styles to a button to use it with icons, for example
@mixin resetButtonStyle {
  padding: 0;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  appearance: none;
}

@mixin base--icon-hover {
  padding: 6px;
  border-radius: $base-border-radius;
  transition: $base-transition;

  &:hover,
  &:focus {
    background: $bg-gray-100;

    .sb-icon {
      color: $text-dark-blue;
    }
  }
}

// showing responsive rows like fav projects assets

@mixin rowMachine($numPerRow, $margin) {
  width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);

  &:nth-child(n) {
    margin-bottom: $margin;
    margin-right: $margin;
  }
  &:nth-child(#{$numPerRow}n) {
    margin-right: 0;
  }
}

@mixin calcCentered($index: 1, $count: 4) {
  $button-width: 36px;
  $spacer-width: 20px;
  $full-width: $button-width + $spacer-width;

  transform: translateX(
    calc(
      -50% - (#{$count} * #{$full-width} - #{$spacer-width}) / 2 +
        (#{$index} * #{$full-width} + #{$button-width} / 2)
    )
  );
}

@mixin arrow {
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -3px;
    width: 13px;
    height: 13px;
    background: $bg-white;
    border: 1px solid rgb(223 227 232);
    transform: translateX(-50%) rotate(45deg);
    clip-path: polygon(0 60%, 0 0, 60% 0);
  }
}

@mixin selectedItem {
  color: $sb-color-text-brand-color;
  font-weight: $sb-font-weight-medium;
}

@mixin focusedTextField {
  border-radius: $base-border-radius;
  outline-offset: 2px;
  outline: 2px solid $border-teal;
}

@mixin scrollbar($background-color: transparent, $thumb-color, $width: 8px) {
  scrollbar-color: $thumb-color $background-color;
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    width: $width;
    height: $width;
    background-color: $background-color;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $thumb-color;
    border-radius: $s-1;
  }
}

@mixin hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */

  &::-webkit-scrollbar {
    display: none;
  }
}

// TODO replace $base-transition with this mixin. $base-transition is using `all` which is:
//  1) is highly unperformant,
//  2) can cause unexpected transitions
@mixin transition($props...) {
  transition-duration: 100ms;
  transition-property: $props;
  transition-timing-function: ease-in-out;
  will-change: $props;
}

@mixin text-contrast(
  $n: $bg-light,
  $light-text: $white,
  $dark-text: $dark-blue
) {
  $color-brightness: round(
    (red($n) * 299) + (green($n) * 587) + calc((blue($n) * 114) / 1000)
  );
  $light-color: round(
    (red(#fff) * 299) + (green(#fff) * 587) + calc((blue(#fff) * 114) / 1000)
  );

  @if abs($color-brightness) < calc($light-color/2) {
    color: $light-text;
  } @else {
    color: $dark-text;
  }
}

@mixin setColor($textColor, $bgColor, $hoverColor) {
  color: $textColor;
  background-color: $bgColor;

  &:hover,
  &:focus {
    background-color: $hoverColor;
  }
}

@mixin focus-outline(
  $outline-color: $sb-color-border-brand-primary,
  $border-radius: $sb-border-radius-sm
) {
  cursor: pointer;

  &:focus-visible {
    border-radius: $border-radius;
    outline-offset: $sb-size-spacing-2xs;
    outline: $sb-border-width-md solid $outline-color;
  }
}