@import 'src/styles/variables';
@import 'src/ts/components/Description/index.module';

.time_zone_map {
  position: relative;
  display: block;
  margin: 0 auto;
  text-align: center;

  &_gap {
    display: block;
    width: 100%;
  }

  &_points {
    position: absolute;
    top: 0;
    left: 0;

    display: inline-block;
    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
  }

  &_point {
    font-size: var(--font-xxs);
    position: absolute;
    top: 0;
    left: 0;

    display: block;
    width: var(--space-xl);
    height: var(--space-xl);

    text-align: center;
    line-height: 20px;
    box-shadow: 0 0 5px var(--color-white), 0 0 5px var(--color-white), 0 0 15px var(--color-white);

    color: var(--color-white);
    border-radius: 32px;
    background-color: var(--color-black);
  }
}

.time_zone_map_point {
  &_p1300 { top: 72%; left: 97.5%; }
  &_p1200 { top: 87%; left: 94%; }
  &_p1100 { top: 81%; left: 88%; } // { top: 26%; left: 88%; }
  &_p1000 { top: 83.5%; left: 86.5%; }
  &_p1030 { top: 82%; left: 84%; }
  &_p0930 { top: 82%; left: 84%; }
  &_p0900 { top: 42%; left: 83%; }
  &_p0800 { top: 47%; left: 78%; }
  &_p0700 { top: 29%; left: 69%; }
  &_p0630 { top: 53%; left: 73%; }
  &_p0600 { top: 29%; left: 66.5%; }
  &_p0545 { top: 47%; left: 69%; }
  &_p0430 { top: 43%; left: 65%; }
  &_p0530 { top: 49.5%; left: 67%; }
  &_p0500 { top: 30%; left: 64%; }
  &_p0400 { top: 31%; left: 60%; }
  &_p0330 { top: 44%; left: 61%; }
  &_p0300 { top: 29%; left: 57%; }
  &_p0200 { top: 33.5%; left: 54%; }
  &_p0100 { top: 35%; left: 48%; }
  &_p0000 { top: 32%; left: 45%; }
  &_m0100 { top: 41%; left: 39%; }
  &_m0200 { top: 75%; left: 33.5%; } // { top: 18%; left: 37%; }
  &_m0300 { top: 81%; left: 30%; }
  &_m0330 { top: 34%; left: 30.5%; }
  &_m0400 { top: 68%; left: 28.5%; }
  &_m0500 { top: 42%; left: 25%; }
  &_m0600 { top: 45%; left: 19%; }
  &_m0700 { top: 42%; left: 16%; }
  &_m0800 { top: 39%; left: 12%; }
  &_m0900 { top: 22%; left: 5%; }
  &_m1000 { top: 74%; left: 4%; }
  &_m1100 { top: 67%; left: 0; }
  &_m1200 { top: 62%; left: 97%; }
  &_hide { display: none }
  &_active { background-color: var(--color-first) }
  &_dismissed { background-color: var(--color-second) }

  &_s { --temp-size: var(--space-xl); padding-top: 0.5px; }
  &_m { --temp-size: var(--space-xxl); margin: -3px; }
  &_l { --temp-size: 32px; margin: -8px; }

  width: var(--temp-size);
  height: var(--temp-size);
  line-height: var(--temp-size);
}
