/**
* c-calendar
*/
@import url('../../styles/variables.css');

.c-calendar {
  width: 20em;
  min-height: 20em;
  font-size: 14px;
  border: 1px solid color(var(--gray) l(85%));
  border-radius: 0.2em;
  padding: 1em;
  user-select: none;
  box-shadow: 2px 2px 0.5em 0 color(var(--gray) l(95%));
  background: color(var(--white));

  &.is-sm {
    font-size: 12px;
  }

  &.is-md {
    font-size: 14px;
  }

  &.is-lg {
    font-size: 16px;
  }
}

.c-calendar__header {
  text-align: center;
  position: relative;
  margin-bottom: 1em;
}

.c-calendar__spacer {
  display: inline-block;
  margin: 0 0.5em;
}

.c-calendar .c-calendar__prev-month,
.c-calendar .c-calendar__next-month,
.c-calendar .c-calendar__prev-year,
.c-calendar .c-calendar__next-year {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;

  &.disabled,
  &.disabled:hover {
    color: color(var(--text-color) l(85%));
    cursor: not-allowed;
  }

  &:hover {
    color: color(var(--blue));
  }
}

.c-calendar .c-calendar__prev-year {
  left: 10px;
}

.c-calendar .c-calendar__prev-month {
  left: 29px;
}

.c-calendar .c-calendar__next-year {
  right: 10px;
}

.c-calendar .c-calendar__next-month {
  right: 29px;
}

.c-calendar__month {
  color: color(var(--text-color));
  cursor: pointer;

  &:hover {
    color: color(var(--blue));
  }
}

.c-calendar__body .c-calendar__month-table,
.c-calendar__body .c-calendar__day-table {
  margin: 0;
  width: 100%;

  & .lastmonth .day-cell,
  & .nextmonth .day-cell {
    color: color(var(--text-color) l(65%));
  }

  & .day-cell-range {
    position: relative;

    &::before {
      content: '';
      display: block;
      background: #e6f7ff;
      border-radius: 0;
      border: 0;
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 0;
      right: 0;
    }
  }

  & .day-cell {
    width: 2em;
    line-height: 2em;
    display: inline-block;
    color: color(var(--text-color));
    border-radius: 50%;
    position: relative;
    transition: background 0.3s ease;
  }

  & .day-cell:hover {
    background: color(var(--blue) l(85%));
  }

  & .active .day-cell {
    color: #fff;
    background: color(var(--blue));
  }

  & .disabled .day-cell,
  & .disabled:hover .day-cell {
    color: color(var(--text-color) l(85%));
    cursor: not-allowed;
    background: color(var(--white));
  }

  & .month-cell {
    width: 3.5em;
    line-height: 2em;
    display: inline-block;
    border: 1px solid #fff;
    color: color(var(--text-color));

    &.disabled,
    &.disabled:hover {
      color: color(var(--text-color) l(85%));
      cursor: not-allowed;
      border: 0;
      box-shadow: none;
    }

    &:hover {
      border: 1px solid color(var(--blue) l(85%));
      box-shadow: 1px 1px color(var(--blue) l(95%));
    }

    &.active {
      color: #fff;
      background: color(var(--blue));
    }
  }
}

.c-calendar__body .c-calendar__month-table td {
  padding: 1em;
}

.c-calendar__body table thead th,
.c-calendar__body table tbody td {
  padding: 0.3em 0.1em;
  font-weight: normal;
  border: 0;
  text-align: center;
}