@import 'mixins';

@include b(calendar) {
  @include define(background, #fff);
  @include define(padding-horizontal, var(--za-padding-h-md));
  @include define(padding-vertical, 10px);
  @include define(header-height, var(--za-height-md));
  @include define(week-height, 40px);
  @include define(week-font-size, 13px);
  @include define(week-font-weight, 500);
  @include define(week-background, #f2f2f2);
  @include define(week-text-color, var(--za-color-text-caption));
  @include define(month-font-size, 17px);
  @include define(month-font-weight, 500);
  @include define(month-height, 50px);
  @include define(month-scroll-background, #fff);
  @include define(day-height, 30px);
  @include define(day-width, 30px);
  @include define(day-font-size, 16px);
  @include define(day-text-color, var(--za-color-text));
  @include define(day-today-background, var(--za-theme-primary-lighter));
  @include define(day-today-text-color, var(--za-theme-primary));
  @include define(day-selected-background, var(--za-theme-primary));
  @include define(day-selected-border-radius, 50%);
  @include define(day-margin-vertical, 10px);
  @include define(day-selected-text-color, #fff);
  @include define(day-selected-shadow, 0 2px 5px 0 var(--za-theme-primary-lighter));
  @include define(day-range-background, var(--za-theme-primary-lighter));
  @include define(day-range-text-color, var(--za-theme-primary));
  @include define(action-btn-disabled, var(--za-color-text-disabled));

  background: var(--background);
  user-select: none;
  position: relative;

  ul {
    list-style-type: disc;
  }

  li {
    display: inline-block;
    width: calc(100% / 7);
    text-align: center;
    vertical-align: middle;
  }

  @include b(picker-view) {
    position: absolute;
    top: var(--header-height);
    z-index: 10;
  }

  @include e(week) {
    display: flex;
    flex-wrap: wrap;
    height: var(--week-height);
    line-height: var(--week-height);
    color: var(--week-text-color);
    background: var(--week-background);
    font-size: var(--week-font-size);
    font-weight: var(--week-font-weight);
    margin: 0;
    padding: 0 var(--padding-horizontal);
  }

  @include e(header) {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--padding-horizontal);
    height: var(--header-height);
    align-items: center;
  }

  @include e(action) {
    display: flex;

    @include e(action-btn) {
      @include m(disabled) {
        color: var(--action-btn-disabled);
      }
    }
  }

  @include e(title) {
    @include m(animate) {
      @include b(icon) {
        transform: rotate(90deg);
        transition: all 0.15s ease-in-out;
      }
    }
  }

  @include e(body) {
    padding: var(--padding-vertical) 0;
    overflow: auto;
  }

  @include e(scroll-month) {
    display: none;
    position: absolute;
    top: var(--week-height);
    width: 100%;
    height: var(--month-height);
    line-height: var(--month-height);
    text-align: center;
    transition: opacity 300ms ease-in-out;
    background-image: linear-gradient(var(--month-scroll-background), transparent);
    font-weight: var(--month-font-weight);
    font-size: var(--month-font-size);

    @include m(entering, entered) {
      display: block;
      opacity: 1;
    }

    @include m(exiting) {
      display: block;
      opacity: 0;
    }
  }

  @include e(month__wrapper) {
    padding: 0 var(--padding-horizontal);
    flex-shrink: 0;
    width: 100%;

    ul {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: stretch;
    }
  }

  @include e(month) {
    height: var(--month-height);
    line-height: var(--month-height);
    padding: 0 var(--padding-horizontal);
    font-size: var(--month-font-size);
    font-weight: var(--month-font-weight);
  }

  @include e(day) {
    margin: var(--day-margin-vertical) 0;
    position: relative;
    font-size: var(--day-font-size);
    color: var(--day-text-color);
    cursor: pointer;

    &__content {
      width: var(--day-width);
      height: var(--day-height);
      background-color: transparent;
      border-radius: var(--day-selected-border-radius);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
    }

    @include m(today) {
      @include b(calendar) {
        @include e(day__content) {
          background: var(--day-today-background);
          color: var(--day-today-text-color);
        }
      }
    }

    @include m(selected) {
      @include b(calendar) {
        @include e(day__content) {
          background: var(--day-selected-background);
          color: var(--day-selected-text-color);
          box-shadow: var(--day-selected-shadow);
        }
      }
    }

    @include m(disabled) {
      cursor: auto;
      @include b(calendar) {
        @include e(day__content) {
          color: var(--za-color-text-disabled);
        }
      }
    }

    @include m(range) {
      background: var(--day-range-background);
      color: var(--day-range-text-color);

      @include b(calendar) {
        @include e(day__content) {
          background: var(--day-range-background);
        }
      }

      &:first-child {
        background-color: transparent;
        @include linegradient(right);
      }

      &:last-child {
        background-color: transparent;
        @include linegradient(left);
      }
    }

    @include m(d6) {
      background-color: transparent;
      @include linegradient(left);
    }

    @include m(d7) {
      background-color: transparent;
      @include linegradient(right);
    }

    @include m(start) {
      background-color: transparent;
      @include linegradient(right);
    }

    @include m(end) {
      background-color: transparent;
      @include linegradient(left);
    }

    @include m(last, first) {
      background-image: none;
    }
  }
}