vault-frontend/src/styles/variables.scss

@import 'colors';

$header_height: 64px;
$cell: 280px;
$fluid_cell: 250px; // smaller cell for fluid flow
$cell_tablet: ($fluid_cell + 5) * 3 + 10; // flow breakpoint for tablet
$cell_mobile: ($fluid_cell + 5) * 2 + 10; // flow breakpoint for mobile
$flow_hide_recents: $cell_tablet; // breakpoint, there recents will be hidden

$gap: 10px;
$lab_gap: $gap * 3;
$lab_gap_mobile: $gap * 2;
$grid_line: 5px;
$content_width: $cell * 5 + $grid_line * 4;
$spc: $gap * 2;
$comment_height: 72px;
$bar_height: 64px;

$radius: 8px;
$cell_radius: $radius;
$panel_radius: $radius;
$input_radius: $radius;
$dialog_radius: $radius * 2;
$placeholder_bg: transparentize(white, 0.96);

$input_height: 36px;
$info_height: 24px;
$limited_width: 940px;

$panel_size: 64px;
$node_title_height: $panel_size;

$bold: 700;
$semibold: 600;
$regular: 400;
$medium: 500;
$light: 300;
$extra_light: 200;

$upload_button_height: 52px;

$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';

$font_48_semibold: $semibold 48px $font;
$font_48_bold: $bold 48px $font;
$font_32_bold: $bold 32px $font;
$font_24_bold: $bold 24px $font;
$font_24_semibold: $bold 24px $font;
$font_24_medium: $medium 24px $font;
$font_24_regular: $regular 24px $font;
$font_20_semibold: $bold 24px $font;
$font_18_regular: $regular 18px $font;
$font_18_extra_light: $extra_light 18px $font;
$font_18_semibold: $semibold 18px $font;
$font_16_regular: $regular 16px $font;
$font_16_semibold: $semibold 16px $font;
$font_16_medium: $medium 16px $font;
$font_14_regular: $regular 14px $font;
$font_14_semibold: $semibold 14px $font;
$font_14_medium: $medium 14px $font;
$font_12_medium: $medium 12px $font;
$font_12_semibold: $semibold 12px $font;
$font_12_bold: $bold 12px $font;
$font_12_regular: $regular 12px $font;
$font_10_regular: $regular 10px $font;
$font_10_semibold: $semibold 10px $font;
$font_8_regular: $regular 8px $font;
$font_8_semibold: $semibold 8px $font;

$font_cell_title: $font_24_semibold;
$font_hero_title: $bold 40px $font;

$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;
$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px;

$comment_shadow: $shadow_depth_2;
$node_shadow: transparentize(black, 0.8) 0 2px, transparentize(black, 0.8) 0 2px 4px;

$tag_height: 26px;

$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
$input_shadow_error: inset $red 0 0 0 1px;
$input_shadow_filled: $input_shadow;

$login_dialog_padding: $gap $gap 30px $gap;
$sidebar_border: transparentize(white, 0.95);

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

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

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

@mixin inner_shadow() {
  box-shadow:
    inset transparentize(white, 0.92) -1px -1px,
    inset transparentize(black, 0.5) 1px 1px,
    inset transparentize(black, 0.7) 0 0 10px;
}

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

  &:hover {
    background: transparentize(white, 0.95);
  }
}

@mixin input_shadow() {
  box-shadow: inset transparentize(white, 0.92) 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(transparentize($color, 1), $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 desktop {
  @media (max-width: $content_width) {
    @content;
  }
}

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

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

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

@mixin can_backdrop {
  @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
    @content;
  }
}

@mixin blur($color: $content_bg, $radius: 15px) {
  background: transparentize($color, 0.1);

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

@mixin title_with_line {
  font: $font_14_semibold;
  text-transform: uppercase;
  color: transparentize(white, 0.3);
  flex-direction: row;
  display: flex;
  align-items: center;

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

  & > :global(.line) {
    flex: 1;
    height: 2px;
    background: transparentize(white, 0.95);
  }
}

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

@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;
  background: transparentize($content_bg, 0.4);
  box-shadow: transparentize(white, 0.95) -1px 0;
}

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

@mixin lab_shadow {
  box-shadow:
    transparentize(black, 0.5) 0 0 0 1px,
    inset transparentize(white, 0.9) 0 1px,
    lighten(black, 0.1) 0 4px;
}