.Month-row {
  display: flex;
}

.Month-dowLabel {
  .Text.is-s;

  background: var(--color-white);
  padding-bottom: var(--gap-s);
  position: relative;
  text-align: center;
  width: 100%;
}

.Month-day {
  background: var(--color-white);
  outline: 1px solid var(--color-gray5);
  position: relative;
  width: 100%;

  &::before {
    content: '';
    display: block;
    padding-bottom: 100%;
  }

  &:focus {
    z-index: 1000;
  }
}

.Month-dow {
  .Text.is-s;

  left: var(--gap-s);
  position: absolute;
  top: var(--gap-s);
  visibility: hidden;
}

.Month-row:first-child .Month-dow {
  flex-basis: 40px;
  visibility: visible;
  width: auto;
}

.Month-dom {
  .Text.is-s;

  position: absolute;
  right: var(--gap-s);
  top: var(--gap-s);
}

.other-month {
  background: var(--color-gray1);
}

.calendarEvents {
  --size: 65%;

  align-items: center;
  background: var(--Link-color);
  border-radius: 50%;
  bottom: var(--gap-s);
  color: var(--color-white);
  display: flex;
  height: var(--size);
  justify-content: center;
  left: var(--gap-s);
  position: absolute;
  width: var(--size);

  &:hover {
    color: var(--color-white);
    text-decoration: none;
  }

  &[data-count='1'] {
    --size: 35%;
  }

  &[data-count='2'] {
    --size: 40%;
  }

  &[data-count='3'] {
    --size: 45%;
  }

  &[data-count='4'] {
    --size: 50%;
  }

  &[data-count='5'] {
    --size: 55%;
  }

  &[data-count='6'] {
    --size: 60%;
  }
}
