/** Extra small devices (phones, 600px and down) */
$xs: "screen and (max-width: 600px)";
/** Small devices (portrait tablets and large phones, 601px to 768px) */
$sm: 'screen and (min-width: 601px) and (max-width: 768px)';
/** Medium devices (landscape tablets, 769px to 991px) */
$md: 'screen and (min-width: 769px) and (max-width: 991px)';
/** Large devices (laptops/desktops, 992px to 1200px) */
$lg: 'screen and (min-width: 992px) and (max-width: 1200px)';
/** Extra large devices (large laptops and desktops, 1201px and up) */
$xl: 'screen and (min-width: 1201px)';
// The mdia mixin
@mixin media( $selectors... ) {
  $selector: '';
  @each $s in $selectors {
    @if $selector == '' {
      $selector: $s;
    } @else {
      $selector: $selector + ', ' + $s;
    }
  }
  @media #{unquote($selector)}{
    @content;
  }
}

$primary_color: #7367F0;
$background: #fff;
$past_background: rgb(250, 250, 250);
$not_current_month_background: rgb(236, 236, 236);
$days_header_color: #626262;

$event_green: #42b983;
$event_black: #262626;

$border_color: #ddd;
$calendar_border: 1px solid $border_color;

@mixin calendar-row {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  /* Shorthand flex: 1 1 0 not supported by IE11 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  flex-flow: row nowrap;
  border-width: 0;
  /* Allow week items to scroll if they are too tall */
  position: relative;
  overflow-y: auto;
  -ms-overflow-style: none;
}

@mixin calendar-cell {
  width: 100%;
  overflow: hidden;
  padding: 0.5em;
  border-right: $calendar_border;
  border-top: $calendar_border;
  user-select: none;
  background: $background;
}

@mixin shadow-text {
  background-color: #565656;
  color: transparent;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

@mixin text-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1em;
}

#persian-calendar {
  font-weight: normal;
  font-size: 1em;
  direction: rtl;
  user-select: none;

  * {
    padding: 0;
    margin: 0;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    outline: none;
    text-transform: none;
    text-decoration: none;
  }

  #vpc_header {
    padding: 20px 15px;
    display: flex;

    #vpc_date-control {
      display: flex;
      justify-content: flex-start;
      font-size: 1em;

      .vpc_control-btn {
        width: 1em;
        height: 1em;
        padding: 0.3em;
        border-radius: 9999px !important;
        cursor: pointer !important;
        background-color: $primary_color !important;
        color: #fff !important;

        &[disabled] {
          background-color: #ccc !important;
          cursor: not-allowed !important;
        }
      }

      .vpc_now-date {
        margin: auto .75em;
        white-space: nowrap;
      }

      .vpc_today-btn {
        @include text-center;
        margin: 0 10px;
        height: 1.3em;
        line-height: 1em;
        vertical-align: middle;
        padding: 0.2em 1.2em;
        border-radius: 15px !important;
        cursor: pointer !important;
        background-color: $primary_color !important;
        color: #fff !important;

        &[disabled] {
          background-color: #ccc !important;
          cursor: not-allowed !important;
        }
      }
    }

    .vpc_period-control {
      margin-right: auto;

      .vpc_period-btn {
        @include text-center;
        margin: 0 10px;
        height: 1.3em;
        line-height: 1em;
        vertical-align: middle;
        padding: 0.2em 1.2em;
        border-radius: 15px !important;
        cursor: pointer !important;
        background-color: $primary_color !important;
        color: #fff !important;
      }
    }
  }

  #vpc_calendar {
    border-radius: 15px;
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .1);

    #vpc_days-header {
      @include calendar-row;

      div {
        @include calendar-cell;
        color: $days_header_color;
        font-size: 0.9em;
        line-height: 0.6em;
        text-align: center;
        cursor: default;

        &:first-child {
          border-top-right-radius: 15px;
        }

        &:last-child {
          border-top-left-radius: 15px;
          border-left: $calendar_border;
        }
      }
    }

    .vpc_week {
      @include calendar-row;
      -ms-overflow-style: none;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }

      .vpc_day {
        @include calendar-cell;
        min-height: 120px;
        cursor: default;

        &.vpc_past {
          background-color: $past_background;

          .vpc_day-number {
            @include shadow-text;
          }
        }

        &.vpc_not-current-month {
          background-color: $not_current_month_background;

          .vpc_day-number {
            @include shadow-text;
          }
        }

        &.vpc_week-period-day {
          min-height: 600px;

          .vpc_day-number {
            font-size: 1.4em;
            text-align: center;
            width: auto !important;
          }
        }

        &.vpc_today {
          .vpc_day-number {
            line-height: 1.5em;
            width: 1.2em;
            height: 1.2em;
            padding: 0;
            margin-top: 0;
            margin-right: 0;
            border-radius: 9999px !important;
            background-color: $primary_color !important;
            color: #fff !important;
            text-align: center;
          }
        }

        &.vpc_day-disable {
          background-color: $not_current_month_background !important;
        }

        .vpc_day-number {
          font-weight: bold;
          line-height: 1.2em;
        }

        &:last-child {
          border-left: $calendar_border;
        }
      }

      /* Events */
      .vpc_event {
        @include text-center;
        font-size: 0.9em;
        height: 1.2em;
        padding-left: 0.78em;
        border-color: #e0e0f0;
        border-radius: 0.5em;
        text-overflow: ellipsis;
        position: absolute;
        white-space: nowrap;
        overflow: hidden;
        background-color: #666;
        color: #fff;
        user-select: none;

        &.offset0 {
          right: 0;
        }

        $i: 1;
        @while $i <= 7 {
          &.span#{$i} {
            text-align: center;
            width: calc((#{$i+'00%'} / 7) - 0.75em);
          }
          &.offset#{$i} {
            right: calc((#{$i+'00%'} / 7));
          }
          $i: $i+1;
        }

        &.isHovered {
          filter: brightness(95%);
        }

        &.continued {
          border-right-style: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;

          &:not(.toBeContinued) {
            .vpc_event-end-time {
              display: block;
            }
          }

          &.span1 {
            .vpc_event-start-date {
              display: none;
            }
          }

          .vpc_event-start-date {
            display: block;
          }
        }

        &.toBeContinued {
          border-left-style: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;

          &:not(.continued) {
            .vpc_event-start-time {
              display: block;
            }
          }

          &.span1 {
            .vpc_event-end-date {
              display: none;
            }
          }

          .vpc_event-end-date {
            display: block;
          }
        }

        &.continued::before,
        &.toBeContinued::after {
          content: " \21e0 ";
          padding: 0 0.1em;
        }

        &:not(.continued):not(.toBeContinued) {
          .vpc_event-start-time,
          .vpc_event-end-time {
            display: block;
          }
        }

        &.oneDay {
          background-color: unset !important;
          color: #262626 !important;

          .vpc_event-title {
            justify-content: inherit;
            margin-right: 0;
            width: 100%;
          }

          .vpc_event-ball {
            width: 10px;
            height: 10px;
            margin: 0 0.1em;
            border-radius: 999px;
          }

          .vpc_event-end-time {
            display: none !important;
          }
        }

        .vpc_event-title {
          text-overflow: ellipsis;
          overflow: hidden;
          margin: 0 auto;
        }

        .vpc_event-start-time,
        .vpc_event-start-time span,
        .vpc_event-end-time,
        .vpc_event-start-date,
        .vpc_event-end-date {
          margin: 0 0.2em;
          display: none;
        }


        /* Event Times */

        & .startTime,
        & .endTime {
          font-weight: bold;
          color: #666;
        }
      }

      &.vpc_week-period {
        .vpc_event {
          height: 1.4em;

          &.oneDay {
            display: block;
            height: 2em;
            line-height: 1em;

            .vpc_event-ball {
              position: absolute;
              top: 0.1em;
            }
            .vpc_event-start-time span {
              display: contents;
            }
            .vpc_event-title {
              margin: 0 0.8em;
            }
          }
        }
      }

      &:last-child {
        .vpc_day {
          border-bottom: $calendar_border;
        }
      }
    }
  }

  .slide-left-enter-active, .slide-right-enter-active {
    transition: all .2s ease;
  }

  .slide-left-leave-active, .slide-right-leave-active {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-left-enter, .slide-right-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }

  .slide-left-leave-to, .slide-right-enter {
    transform: translateX(-10px);
    opacity: 0;
  }

}