.calendar {
  display: none;
  margin: 4px;

  .calendar-header,
  .calendar-table {
    min-width: 190px;
    margin-left: auto;
    margin-right: auto;
  }

  .calendar-title {
    @include button-sizing;
    margin: 0 auto;
    margin-bottom: 8px;
    text-align: center;
    display: block;
  }

  .calendar-header button {
    @include button-sizing;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    border-radius: $border-radius;
    background: transparent;

    &:hover {
      background: $grey-color;
    }
  }

  .calendar-header {
    display: flex;
    margin: 0 6px 4px;

    .calendar-selects {
      flex: 5;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2px;
    }

    .arrow {
      flex: 1;
      text-align: center;

      &.arrow-hidden {
        visibility: hidden;
      }
    }
  }


  .calendar-table {
    height: 180px;
    border: 1px solid $grey-color;
    border-radius: $border-radius;
    overflow: hidden;
    padding: 5px;
    display: flex;
    align-content: stretch;
    justify-content: space-around;
    flex-direction: column;

    .table-row {
      display: flex;
      align-content: stretch;
      justify-content: space-around;
      flex: 1;

      .table-col {
        display: flex;
        flex: 1;

        .table-value-wrapper {
          display: flex;
          flex: 1;
          align-items: center;

          .table-value {
            flex: 1;
          }
        }

        text-align: center;
        line-height: 1;

        cursor: default;

        user-select: none;

        &.out-of-boundaries,
        &.unavailable,
        .week-day.unavailable {
          color: $dark-grey-color;
        }

        &.in-range {
          background: $in-range-color;
        }

        &.clickable {
          cursor: pointer;

          &:hover .table-value-wrapper {
            background: $slightly-darker-grey-color;
            border-radius: $border-radius;
          }
        }

        &.start-date,
        &.end-date {
          .table-value-wrapper {
            border-radius: $border-radius;

            &, &:hover {
              background: $active-color;
              color: white;
            }
          }

          &.out-of-boundaries .table-value-wrapper{
            &, &:hover {
              background: $dark-grey-color;
            }
          }
        }

        &.start-date {
          border-radius: $border-radius 0 0 $border-radius;
        }

        &.end-date {
          border-radius: 0 $border-radius $border-radius 0;
        }

        .week-day {
          flex: 1;
          text-align: center;
        }
      }

      &.weekdays .table-col {
        font-weight: bold;
      }
    }
  }
}