.date {
  background-color: $bg;
  color: $fg;
  border-radius: 30px;
  border: 5px solid $contrastbg;
}

.timebox {
  margin: 30px 0px;
  .time-container {
    .content {
      font-family: Product Sans;
      font-weight: bolder;
      font-size: 60px;
    }
    .divider {
      margin: 8px 15px;
      padding: 0px 1px;
      background: linear-gradient($red, $magenta, $blue, $cyan);
    }
  }
  .date-container {
    font-family: Product Sans;
    margin-top: 2px;
  }
}

.cal-box {
  font-family: Product Sans;
  background-color: $bg;
  border-radius: 15px;
  padding: 0 1rem .2rem;
  color: $fg;
  background-color: $contrastbg;
  margin: 0px 12px 12px 12px;

  .cal {
    background-color: inherit;
    padding: .5rem .10rem 0rem;
    margin-left: 10px;

    & > * {
      border: solid 0px transparent;
    }
    
    &.highlight {
      padding: 10rem;
    }
  }
}

calendar:selected {
  color: $cyan;
}

calendar.header {
  color: $cyan;
  font-weight: bold;
}

calendar.button {
  color: $cyan;
}

calendar.highlight {
  color: $green;
  font-weight: bold;
}

calendar:indeterminate {
  color: $lightblack;
}