vault-frontend/src/styles/_mixins.scss

@use 'sass:math';

@mixin outer_shadow() {
  box-shadow:
    inset $gray_90 1px 1px,
    transparentize(black, 0.8) 1px 1px,
    transparentize(black, 0.6) 0 1px 5px;
}

// same as outer shadow, but higher
@mixin dropdown_shadow {
  box-shadow:
    inset $gray_90 1px 1px,
    transparentize(black, 0.8) 1px 1px,
    transparentize(black, 0.6) 5px 5px 10px;
}

@mixin row_shadow() {
  &:not(:last-child) {
    box-shadow:
      $gray_90 0 1px,
      inset transparentize(black, 0.8) 0 -1px;
  }

  &:only-child {
    box-shadow: none;
  }
}

@mixin inner_shadow() {
  box-shadow:
    inset $gray_90 -1px -1px,
    inset transparentize(black, 0.9) 1px 1px,
    inset transparentize(black, 0.9) 0 0 10px;
}

@mixin inner_shadow_active() {
  @include inner_shadow;
  transition: background-color 250ms;

  &:hover {
    background: $gray_90;
  }
}

@mixin input_shadow() {
  box-shadow:
    inset $gray_90 0 -1px,
    inset transparentize(black, 0.8) 0 1px;
}

@mixin modal_mixin() {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin after_shade($color, $position: relative) {
  position: $position;

  &::after {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 120px;
    width: 100%;
    background: linear-gradient(transparent, $color);
    border-radius: $radius;
    pointer-events: none;
    touch-action: none;
  }
}

@mixin phone {
  @media (max-width: 320px) {
    @content;
  }
}

@mixin tablet {
  @media (max-width: 599px) {
    @content;
  }
}

@mixin sidebar_stack_limit {
  @media (max-width: 1000px) {
    @content;
  }
}

@mixin desktop {
  @media (max-width: $content_width) {
    @content;
  }
}

@mixin vertical_at_tablet {
  @media (max-width: 599px) {
    flex-direction: column !important;

    @content;

    & > * {
      margin: $gap * 0.5 0 !important;

      &:first-child {
        margin-top: 0 !important;
      }
      &:last-child {
        margin-bottom: 0 !important;
      }
    }
  }
}

@mixin can_backdrop {
  @supports ((bla-bla-bla: 4px)) {
    @content;
  }

  @supports (
    (-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))
  ) {
    // @supports not (-moz-appearance: none) {
    @content;
    // }

    // disable blur on firefox mobile (until they fix its performance)
    // @supports (-moz-appearance: none) {
    // @media (hover: hover) {
    // @content;
    // }
    // }
  }
}

@mixin blur($color: $content_bg_backdrop, $radius: 10px) {
  background: $color;

  @include can_backdrop {
    backdrop-filter: blur($radius);
    -webkit-backdrop-filter: blur($radius);
    background: $color;
  }
}

@mixin title_with_line {
  font: $font_14_semibold;
  text-transform: uppercase;
  color: $gray_25;
  flex-direction: row;
  display: flex;
  align-items: center;

  & > * {
    padding-right: $gap;
  }

  & > :global(.line) {
    flex: 1;
    height: 2px;
    background: $gray_90;
  }
}

@mixin clamp($lines, $line: 1em) {
  display: -webkit-box;
  line-clamp: $lines;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@mixin sidebar {
  @include blur;
}

@mixin sidebar_content($width: 400px) {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex: 0 1 $width;
  max-width: 100vw;
  position: relative;
  border-radius: $radius 0 0 $radius;
}

@mixin editor_round_button {
  width: $upload_button_height;
  height: $upload_button_height;
  border-radius: ($upload_button_height * 0.5) !important;
  flex: 0 0 $upload_button_height;
  position: relative;
  border-radius: $radius;
  cursor: pointer;
}

/** Creates container for container-query flow. 

Should wrap div with @flow_grid and @flow_breakpoint mixins
**/
@mixin flow_container {
  container: sizer / inline-size;
}

/** Setups flow grid. 

Should be wrapped with div that uses @include flow_container() for correct work

Pass your custom rows here, like:

@include flow_grid {
   grid-template-rows: 220px; // will add 220px first row
}
**/
@mixin flow_grid {
  display: grid;
  gap: #{$gap};
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: calc((100cqw - 4 * #{$gap} / 2) / 5);
  grid-auto-flow: row dense;

  @content;
}

/** Makes a breakpoint for target cell width,

Pass your rules for that breakpoint in @content: 

@include flow_breakpoint(2) { // defines breakpoint for 2 cells
  background: red; // will paint element red at 2 cells resolution;
}
**/
@mixin flow_breakpoint($columns) {
  @container sizer (max-width: #{$target_flow_cell_width* $columns}) {
    grid-template-columns: repeat(#{$columns}, 1fr);
    grid-auto-rows: calc(
      (100cqw - #{$columns - 1} * #{$gap} / 2) / #{$columns}
    );
    @content;
  }
}

@mixin appear {
  @keyframes __appear {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  animation: __appear 0.25s forwards;
}

@mixin container {
  max-width: $content_width + $gap * 8;
  width: 100%;

  padding-left: $gap * 4;
  padding-right: $gap * 4;

  @include tablet {
    padding-left: 0;
    padding-right: 0;
  }
}

@mixin hover_opacity($initial_opacity: 0.5) {
  opacity: $initial_opacity;
  transition: opacity 0.25s;

  &:hover {
    opacity: 1;
  }
}

@mixin popper_arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;

  [data-popper-placement*='bottom'] & {
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent $content_bg_lightest transparent;
    top: -10px;
  }

  [data-popper-placement*='top'] & {
    border-width: 10px 10px 0 10px;
    border-color: $content_bg_lightest transparent transparent transparent;
    bottom: -10px;
  }

  [data-popper-placement*='right'] & {
    border-width: 10px 10px 10px 0;
    border-color: transparent $content_bg_lightest transparent transparent;
    left: -10px;
  }

  [data-popper-placement*='left'] & {
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent $content_bg_lightest;
    right: -10px;
  }
}

@mixin arrow_left($size: 50, $color: $content_bg) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: $size $size $size 0;
  border-color: transparent $color transparent transparent;
}