@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &calendar{
    flex-wrap: wrap;
    position:relative;
    @include divider;
    &--wrapper{
      text-align:center;
      background:#fff;
      position:relative;
    }
    &--date{
      width:14.285714285714286%;
      @include var-height($--box-size-height-default, 'line-height');
      @include var-height();
      &.is-start,&.is-end{
        color:#fff!important;
        @include var-background-color()
      }
      &.is-active{
        position:relative;
        &:before{
          content: '';
          height:100%;
          width:100%;
          position:absolute;
          top:0;
          left:0;
          @include var-background-color();
          opacity:0.15;
        }
      }
      &.is-disabled{
        @include var-color($--color-assist);
      }
      &.is-weekend{
        color:#F96903;
        &.is-disabled{
          color:rgba(#F96903,0.6);
        }
      }
      &.is-today{
        @include var-color();
      }
    }
    &--header{
      line-height:0.8rem;
      .is-weekend{
        color:#F96903;
      }
      button{
        @include button;
        @include var-height();
        min-width:1rem;
        @include disabled;
      }
    }
    &--controls{
      button{
        opacity: 0.8;
      }
      .vx-flexbox--item{
        position:relative;
      }
      input{
        font-size:inherit;
        font-family:inherit;
        border:0;
        text-align:center;
        position:absolute;
        left:0;
        top:0;
        height:100%;
        width:100%;
        outline:none;
        opacity:0;
        &:focus{
          opacity:1;
        }
      }
    }
  }
}