$cell-height : 10px;
$cell-width : 10px;
$cell-margin:2px;
$cell-weekdays-width: 30px;

html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
}

#container {
  height: 514px;
  width: 930px;
  margin: 50px auto;
}

.timeline {
  margin: 20px;
  margin-bottom: 60px;
  
  .timeline-months {
    display: flex;
    padding-left: $cell-weekdays-width;

    &-month {
      width: $cell-width;
      margin: $cell-margin;
      border: 1px solid transparent;
      font-size: 10px;
    }

    .Jan~.Jan,
    .Feb~.Feb,
    .Mar~.Mar,
    .Apr~.Apr,
    .May~.May,
    .Jun~.Jun,
    .Jul~.Jul,
    .Aug~.Aug,
    .Sep~.Sep,
    .Oct~.Oct,
    .Nov~.Nov,
    .Dec~.Dec {
      visibility: hidden;
    }
  }

  &-body {
    display: flex;

    .timeline-weekdays {
      display: inline-flex;
      flex-direction: column;
      width: $cell-weekdays-width;

      &-weekday {
        font-size: 10px;
        height: $cell-height;
        border: 1px solid transparent;
        margin: $cell-margin;
        vertical-align: middle;
      }
    }

    .timeline-cells {
      display: inline-flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: #{(10 + 4) * 8}px;

      &-cell {
        height: $cell-height;
        width: $cell-width;
        border: 1px solid rgba(0, 0, 0, 0.1);
        margin: $cell-margin;
        border-radius: 2px;
        background-color: rgba(0, 0, 0, 0.05);

        &:hover {
          border: 1px solid rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
}