@import '../variables.less';
@import '../mixins.less';

.calendar {
  text-align: center;
}

.toolbar {
  display: flex;
  font-size: .85rem;
  line-height: 2.2rem;
  height: 2.2rem;
  background: #f7f7f8;
}

.icon-prev,
.icon-next {
  width: 0.75rem;
  height: 0.75rem;
  display: inline-block;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;

  &.disabled {
    opacity: .3;
  }
}

.year-value, .month-value {
  width: 2rem;
}


.icon {
  display: inline-block;
  vertical-align: middle;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  font-style: normal;
  position: relative;
  width: 2.5rem;
  height: 100%;

  &.icon-next, &.icon-prev {
    background-size: 0.75rem 0.75rem;
  }

  &.icon-next {
    .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#04BE02' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
  }
  &.icon-prev {
    .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#04BE02' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
  }
}

.weekdays {
  position: relative;
  .hairline(bottom, #ccc);
}

.year-picker,
.month-picker {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.weekdays {
  display: flex;
  font-size: .6rem;
  background: #f7f7f8;
}

.weekday {
  flex: 1;
}

.months {
  overflow: hidden;
}

.months-inner {
  width: 100%;
  display: flex;
  position: relative;
  left: -100%;
  -webkit-backface-visibility: hidden;
}

.transition .months-inner {
  transition: transform .3s;
}

.month {
  font-size: .75rem;
  width: 100%;
  flex-shrink: 0;
}

.date {
  height: 2rem;
  line-height: 2rem;
  float: left;
  width: 14.2857%;
  position: relative;
  .hairline(bottom, #ccc);

  span {
    display: inline-block;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
    border-radius: .75rem;
    
  }
  &.today span {
      background-color: #e3e3e3;
  }
  &.selected span {
    background-color: @color-primary;
    color: white;
  }

  &.next-date, &.prev-date, &.disabled {
    color: @color-text-gray;
  }
}