@import 'colors';

$cell: 256px;
$content_width: $cell * 4;
$gap: 10px;
$spc: $gap * 2;

$cell_radius: 4px;
$panel_radius: 4px;

$grid_line: 4px;

$input_height: 32px;
$input_radius: 2px;

$info_height: 24px;

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

$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_24_semibold: $semibold 24px $font;
$font_24_regular: $regular 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_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_regular: $regular 12px $font;
$font_10_regular: $regular 10px $font;
$font_10_semibold: $semibold 10px $font;

$font_cell_title: $font_24_semibold;
$font_hero_title: $font_48_semibold;

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

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

@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;
}