@charset "UTF-8";
@use 'sass:color';
@use 'sass:math';

/*! Copyright (C) 2015-2024 AIZAWA Hina | MIT License */

// From node_modules/bootstrap/less/variables.less
$brand-primary: color.adjust(#428bca, $lightness: -6.5%);
$link-color: $brand-primary;
$link-hover-color: color.adjust($link-color, $lightness: -15%);
$link-hover-decoration: underline;

$golden-ratio: 1.61803398875;
$color-win: #3169b3;
$color-lose: #ec6110;
$color-ko: #68c8f2;
$color-time: #f5a101;

@function add-unit($dimensionless-number, $unit) {
  @return ($dimensionless-number * $unit);
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;

  @media (min-width: 768px) {
    overflow-x: auto;
  }
}

main {
  flex: 1 1 100%;
}

.navbar {
  border-radius: 0 !important;
}

// フッター
footer {
  background-color: #f5f5f5;
  font-size: add-unit($golden-ratio - 1, 1em);
  margin: add-unit($golden-ratio - 1, 1em) 0 0;
  padding: add-unit($golden-ratio, 1em) 0;
  width: 100%;

  .footer-nav,
  .footer-notice,
  .footer-powered {
    margin-top: add-unit($golden-ratio - 1, 1em);
  }
}

#social {
  height: 22px;
  margin-bottom: 20px;
}

#stat {
  h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.license-body {
  margin-left: 10%;
  margin-right: 5%;
}

.user-label {
  --scale: 0.8;

  color: #aaa;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: scale(var(--scale), 1);
  transform-origin: left center;
  white-space: nowrap;
  width: calc(100% / var(--scale));
}

html[lang^='ja'],
html[lang^='ko-'],
html[lang^='zh-'],
.lang-ja,
.lang-ko,
.lang-zh {
  .user-label {
    --scale: 0.618034;
  }
}

.user-number {
  font-size: 1.5em;
}

.scale-x {
  --scale-x: 1;

  transform: scale(var(--scale-x), 1) !important;
  transform-origin: left center !important;
}

#user-miniinfo {
  hr {
    margin-bottom: 5px;
    margin-top: 5px;
  }
}

.nobr {
  white-space: nowrap;
}

.omit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-left-important {
  text-align: left !important;
}

.text-center-important {
  text-align: center !important;
}

.text-right-important {
  text-align: right !important;
}

.very-small {
  font-size: 50%;
}

.font-italic {
  font-style: italic;
}

.text-link {
  color: $link-color;
  text-decoration: none;
}

a.text-link,
button.text-link {
  cursor: pointer;

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
  }

  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }
}

.cursor-pointer {
  cursor: pointer;

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
  }
}

.cell-lobby,
.cell-sub-weapon,
.cell-special,
.cell-rank,
.cell-rank-after,
.cell-gachi-power,
.cell-league-power,
.cell-level,
.cell-level-after,
.cell-kill-min,
.cell-death-min,
.cell-specials,
.cell-special-min,
.cell-point,
.cell-inked-min,
.cell-rank-in-team
.cell-reltime {
  display: none;
}

.label-success {
  background-color: $color-win;
}

.label-danger {
  background-color: $color-lose;
}

.label-info {
  background-color: $color-ko;
}

.label-warning {
  background-color: $color-time;
}

.sns,
.adsense {
  margin-bottom: 15px;
}

.fa {
  &.left {
    margin-right: 1ex;
  }

  &.right {
    margin-left: 1ex;
  }
}

.progress {
  margin-bottom: 0;
}

tr.its-me {
  background-color: #ffc;
}

.theme-dark tr.its-me {
  background-color: #404002;
}

/* disconnected rows & holidays */
tr.disconnected,
tr.bg-dow-6,
tr.bg-dow-7 {
  background-color: #fdd;
}

.theme-dark tr.disconnected,
.theme-dark tr.bg-dow-6,
.theme-dark tr.bg-dow-7 {
  background: #700808;
}

.table-striped>tbody>tr.disconnected:nth-of-type(odd),
.table-striped>tbody>tr.bg-dow-6:nth-of-type(odd),
.table-striped>tbody>tr.bg-dow-7:nth-of-type(odd) {
  background: #fdd;
}

.theme-dark .table-striped>tbody>tr.disconnected:nth-of-type(odd),
.theme-dark .table-striped>tbody>tr.bg-dow-6:nth-of-type(odd),
.theme-dark .table-striped>tbody>tr.bg-dow-7:nth-of-type(odd) {
  background: #700808;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.dropdown-submenu {
  position: relative;

  > .dropdown-menu {
    border-radius: 0 6px 6px 0;
    left: 100%;
    margin-left: -1px;
    margin-top: -6px;
    top: 0;
  }

  &:hover > .dropdown-menu {
    display: block;
  }

  > a::after {
    border-color: transparent;
    border-left-color: #ccc;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    content: ' ';
    display: block;
    float: right;
    height: 0;
    margin-right: -10px;
    margin-top: 5px;
    width: 0;
  }

  &:hover > a::after {
    border-left-color: #fff;
  }

  &.pull-left {
    float: none;
  }

  &.pull-left > .dropdown-menu {
    border-radius: 6px 0;
    left: -100%;
    margin-left: 10px;
  }
}

/* stylelint-disable */
$sizes: (
  0: (0 * 5px),
  1: (1 * 5px),
  2: (2 * 5px),
  3: (3 * 5px),
  4: (4 * 5px),
  auto: auto,
);

$props: (
  m: margin,
  p: padding,
);

$positions: (
  t: top,
  r: right,
  b: bottom,
  l: left,
);
/* stylelint-enable */

@each $propShort, $propLong in $props {
  @each $sizeKey, $sizeValue in $sizes {
    .#{$propShort}-#{$sizeKey} {
      #{$propLong}: $sizeValue !important;
    }
  }

  @each $posShort, $posLong in $positions {
    @each $sizeKey, $sizeValue in $sizes {
      .#{$propShort}#{$posShort}-#{$sizeKey} {
        #{$propLong}-#{$posLong}: $sizeValue !important;
      }
    }
  }

  @each $sizeKey, $sizeValue in $sizes {
    .#{$propShort}x-#{$sizeKey} {
      #{$propLong}-left: $sizeValue !important;
      #{$propLong}-right: $sizeValue !important;
    }

    .#{$propShort}y-#{$sizeKey} {
      #{$propLong}-bottom: $sizeValue !important;
      #{$propLong}-top: $sizeValue !important;
    }
  }

  @each $sizeKey, $sizeValue in $sizes {
    .#{$propShort}h-#{$sizeKey} {
      #{$propLong}-left: $sizeValue !important;
      #{$propLong}-right: $sizeValue !important;
    }

    .#{$propShort}v-#{$sizeKey} {
      #{$propLong}-top: $sizeValue !important;
      #{$propLong}-bottom: $sizeValue !important;
    }
  }
}

.h-auto {
  height: auto !important;
}

.h-100 {
  height: 100% !important;
}

.h-em {
  height: 1.2em !important;
}

.w-auto {
  width: auto !important;
}


.w-sm-auto {
  @media (min-width: 768px) {
    width: auto !important;
  }
}

$step: 5;
@for $index from 0 through math.div(100, $step) {
  $pct: $index * $step;

  .w-#{$pct} {
    width: math.percentage($pct * 0.01) !important;
  }
}

/* stylelint-disable */
$weights: (
  bold: bold,
  bolder: bolder,
  light: 300,
  lighter: lighter,
  normal: normal,
);
/* stylelint-enable */

@each $k, $v in $weights {
  .fw-#{$k} {
    font-weight: $v !important;
  }
}

.freshness-flag {
  background-color: #111;

  &.freshness-flag-grey {
    color: #555;
  }

  &.freshness-flag-green {
    color: #b8d57b;
  }

  &.freshness-flag-orange {
    color: #cb3f02;
  }

  &.freshness-flag-silver {
    color: #dde7df;
  }

  &.freshness-flag-white {
    color: #dde7df;
  }

  &.freshness-flag-gold {
    color: #f0b700;
  }
}

.bg-white {
  background-color: #fff;
}

.text-body {
  color: #333;

  .dark-theme & {
    color: #fff;
  }
}

img.basic-icon {
  --icon-height: 1.5em;
  --icon-valign: middle;

  height: var(--icon-height);
  line-height: 1;
  vertical-align: var(--icon-valign);
  width: auto;

  &.dark {
    background: #333;
    display: inline-block;
  }

  &.rounded {
    border-radius: 50%;
    display: inline-block;
  }
}
