@import 'theme/variables';

.header-calendar-wrapper {
  text-align: center;

  //background-color: $toolbar-background;

  color: $toolbar-text-color;

  .datepicker-headline {
    font-size: 2em;
  }

  .datepicker-subline {
    margin-top: .5em;
  }

  .selection-wrapper {
    width: 100%;

    height: 7em;

    overflow-y: hidden;
    overflow-x: scroll;

    .selection-slider {

      margin: 1em 0;

      .selection-slider-padding {
        float: left;

        height: 10px;
        width: calc(50vw - 64px);
      }

      .selection {
        float: left;

        width: 64px;
        height: 64px;
        line-height: 64px;

        margin: 0px 32px;

        font-size: 1.5em;

        border-radius: 50px;

        &.active {
          background-color: $toolbar-text-color;
          color: $toolbar-background;
        }
      }
    }
  }
}