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

.timebox {
  margin: 30px 0;

  .time-container {
    .content {
      font-weight: bolder;
      font-size: 60px;
    }

    .divider {
      margin: 8px 15px;
      padding: 0 1px;
      background: linear-gradient($red, $magenta, $blue, $cyan);
    }
  }

  .date-container {
    margin-top: 2px;
  }
}

.cal-box {
  border-radius: 30px;
  padding: 0 1rem .2rem;
  color: $fg;
  background-color: $bgfull;
  border-bottom: 2px solid $contrast-bg;
  border-top: 2px solid $contrast-bg;
  margin: 0 12px 18px;

  .cal {
    font-size: 20px;
    background-color: inherit;
    padding: .5rem .10rem 0;
    margin-left: 10px;
    border-radius: 30px;

    & > * {
      border: solid 0 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;
}