variables.scss

// ==================
// color
$green-1: #e813a4;
$green-2: #e33bae;
$green-3: #e35bb8;
$green-4: #e381c4;
$gray-1: #333;
$gray-2: #4d4d4d;
$gray-3: #707070;
$gray-4: #d9d9d9;
$gray-5: #f8f9fa;
$white: #fff;
$link: #006ca8;
$emergency: #FFE200;
$alert: #AD2121;

// ==================
// shadow
$shadow: 0 0 2px rgba(0, 0, 0, 0.15);

// ==================
// break-points
$huge: 1440;
$large: 1170;
$medium: 768;
$small: 600;
$tiny: 320;

// ==================
// z-index
$z-index-map: (
  opened-side-navigation: 101,
  sp-navigation: 100,
);

@function z-index-of($key) {
  @return map-get($z-index-map, $key);
}

// ==================
// media-query
@mixin largerThan($width) {
  @media screen and (min-width: $width + 1 + px) {
    @content;
  }
}

@mixin lessThan($width) {
  @media screen and (max-width: $width + px) {
    @content;
  }
}

// ==================
// font-size
@mixin font-size($size, $important: false) {
  font-size: ($size / 10) + rem #{if($important, "!important", "")};
}

@mixin card-h1 {
  @include font-size(24);

  color: $gray-2;
  font-weight: bold;
}

@mixin card-h2 {
  @include font-size(19);

  color: $gray-2;
  font-weight: bold;
}

@mixin card-h3 {
  @include font-size(16);

  color: $gray-2;
  font-weight: bold;
}

@mixin body-text {
  @include font-size(16);

  color: $gray-1;
  line-height: 160%;
  font-weight: normal;
}

// ===================
// button
@mixin text-link {
  @include font-size(14);

  color: $link !important;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

@mixin button-text($size: 'md', $font-size: 14) {
  @if ($size == 'sm') {
    padding: 4px 8px;
  }

  @else {
    padding: 24px 36px;
  }

  @include font-size($font-size);

  display: inline-block;
  border-radius: 4px;
  background-color: $white;
  border: 1px solid $green-1;
  color: $green-1;
  cursor: pointer;

  &:hover {
    background-color: $green-1;
    color: $white;

    > i {
      color: $white !important;
    }
  }
}

// ===================
// card
@mixin card-container($withDivider: false) {
  background-color: $white;
  box-shadow: $shadow;
  border: 0.5px solid $gray-4 !important;
  border-radius: 4px;

  @if ($withDivider) {
    &::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      width: 1px;
      height: 100%;
      background-color: $gray-4;
    }
  }
}

// ===================
// Visually Hidden (for screen reader)
// https://github.com/ampproject/amphtml/blob/2e9a940e78df8de38a6c06a0772aeaa4839a24d1/css/ampshared.css#L164-L204

@mixin visually-hidden() {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 4px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
}

// ===================
// Vuetify

// Expansion Panels
// https://vuetifyjs.com/en/components/expansion-panels/
$expansion-panel-content-padding: 0;
$expansion-panel-header-padding: 10px 0;
$expansion-panel-header-min-height: 26px;
$expansion-panel-active-header-min-height: 26px;
$expansion-panel-header-font-size: .875rem;