%calendar-line-head{
  width: 4%;
  text-align: center;
  vertical-align: middle;
  @include small;
  &~td{
    width: 13.7142%;
  }
  &+td{
    border-left: none;
  }
}
%calendar-time-number{
  float: left;
  margin: -0.5*$gap (-0.5*$gap) 0 0;
  padding: 0.5*$gap;
  line-height: $box-padding;
  position: relative;
  text-align: left;
  @include small;
  @extend %tooltip-top;
  & + div,& + p {
    clear: both;
  }
  @include respond-to(max-#{$calendar-collapse}){
    //padding: 0;
  }
}
%calendar-body-element{
  @extend %box-inside;
  vertical-align: top;
  border-collapse: collapse;
  text-align: center;
  padding: 0.5*$gap;
  & > div{
    &.easy-calendar-inside{
      position: relative;
      @include respond-to(max-#{$calendar-collapse}){
        padding: $gap $box-padding;
      }
    }
  }
  p{
	margin: 0;
  }
  &.today{
    //background: $color-calendar-background-today;
    @extend %pattern-diagonal-stripes-background;
  }
  &.odd,&.weekend{
    background: $color-calendar-background-weekend;
  }
  &.holiday{
    background: $color-calendar-background-holiday;
  }
  &.exception{
    background: $color-calendar-background-exception;
  }
  &.odd{
    opacity: 0.5;
    &:hover{
      opacity: 1;
    }
  }
  &.week-number,&.day-number,&.month-number{
    //@extend %calendar-head-element;
    @extend %calendar-line-head;
    background: rgba(mix($color-background,$color-foreground),0.5);
    border-right: 1px solid $color-border-minor !important;
    @include respond-to(max-#{$calendar-collapse}){
      border-right: none !important;
    }
  }
  .day-num{
    @extend %calendar-time-number;
  }
  .day-name{
    @include respond-to(min-#{$calendar-collapse}){
      display: none;
    }
  }
  .day-content{
    clear: both;
    margin-bottom: $gap;
    @include small;
  }
  .calendar-actions{
    //padding: 0.5*$gap;
    //position: absolute;
    //top: -0.5*$gap;
    //right: -0.5*$gap;
    //max-width: 70%;
    //max-width: calc(100% - #{2*$box-padding});

    padding: 0.5*$gap;
    position: relative;
    a{
      opacity: 0;
      @extend %button-mini-positive;
      @extend %truncate;
      @extend %box-sizing-border-box;
      width: 100%;

      //@extend %tooltip-left;
    }

    @include respond-to(max-#{$calendar-collapse}){
      right: 0.5*$box-padding;
      top: 0;
      position: absolute;
      max-width: 70%;
      max-width: calc(100% - #{2*$box-padding});
      a{
        opacity: 1;
      }
    }

  }
  &:hover, &.today{
    .calendar-actions{
      a{
        opacity: 1;
      }
    }
  }
}
%calendar-listing-links{
  @extend  %flex;
  @extend %justify-content-space-between;
  @extend %align-items-center;

  line-height: $button-height;
  text-align: center;
  float: none !important;
  margin-bottom: 0.5*$box-padding;
  &:first-child{
    margin-top: 0.5*$box-padding;
  }
  //@extend %clearfix;
  @include respond-to(max-sidebar-collapse) {
    //width: 50%;
    flex-direction: column;

    .prev,.next{
      order: 9;
      width: 50%;
    }
    //.next{
    //  align-self: flex-end;
    //  margin-top: -1.5*$gap;
    //}
  }
  .prev{
    @extend %control-arrow-prev;
    justify-content: flex-start;
    margin:0 $box-padding;
  }
  .next{
    @extend %control-arrow-next;
    justify-content: flex-end;
    margin:0 $box-padding;
  }

  //& > span {
  //  margin-left: $gap;
  //  margin-right: $gap;
  //}

  span{
    &.prev,&.next{
      opacity: 0.5;
      &:hover{
        //@include translate(0, 0);
        cursor: default;
      }
    }
  }
  a{
    color: $color-text;
  }
  & > .period,& > .easy-cal-title{
    @extend %h3;
    margin: 0;
    width: auto;
    line-height: 1.5;
    //padding: 1.5*$gap 0;
    display: inline-block;
  }
}
%calendar-head-element{
  //border:none;
  //background: none;
  text-align: center;
  padding: 0.5*$gap 0;
  border-left: none;
  border-right: none;
}
%calendar-row{

}
