@import 'src/styles/variables';

.year_chart {
  --day-size: 16px;
  padding: var(--space-xs) 0;
  margin: 0 calc(var(--day-size) / -2);
}

.year_chart_month {
  --month-size: calc(var(--day-size) * 7 + 7px);

  display: inline-block;
  width: var(--month-size);
  margin: var(--day-size) calc(var(--day-size) / 2) 0;
  vertical-align: top;

  &_header {
    display: block;
    height: 24px;

    &_title {
      font-weight: 100;
      font-size: var(--font-xs);
      font-family: Arial, Verdana, sans-serif;

      display: block;
      padding: 0;
      margin: 0 auto;

      text-align: center;
      line-height: var(--font-m);
      text-decoration: none;
      vertical-align: bottom;
      color: var(--color-black);
    }
  }

  &_body {
    position: relative;
    display: block;
    width: var(--month-size);
    max-width: var(--month-size);

    &_day {
      position: relative;
      display: inline-block;
      width: var(--day-size);
      height: var(--day-size);
      margin: 0 1px 1px 0;
      vertical-align: top;
      cursor: pointer;
      text-align: center;

      background-color: var(--color-border);
      background-blend-mode: screen;
      -webkit-print-color-adjust: exact;

      &_arrow {
        position: absolute;
        top: 20px;
        left: 0;
        z-index: 1;

        display: inline-block;
        width: 0;
        height: 0;

        transform: rotateZ(-45deg);
        border: 16px solid white;
        border-right: none;
        border-bottom: none;
        background-color: var(--color-white);
      }

      &_info {
        font-size: var(--font-s);
        position: absolute;
        left: -175px;
        top: var(--space-xxl);
        z-index: 1;

        display: block;
        width: 350px;
        max-height: 350px;
        overflow-x: hidden;
        padding: var(--space-s);

        cursor: default;
        text-align: left;
        border-radius: var(--border-radius-m);
        box-shadow: 2px 2px 5px var(--color-border);
        border: 1px solid var(--color-border);
        background-color: var(--color-white);
      }
    }
  }
}
