.q-calendar-task {
  // don't use relative positioning here as it breaks smooth transitions
  //position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;

  &__head {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;

    &--tasks {
      position: relative;
      display: flex;
    }

    &--days {
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      user-select: none;
      font-size: 1rem;
    }

    &--day {
      position: relative;
      flex: 1 1 100%;
      flex-wrap: nowrap;
      overflow: hidden;
      width: 0;
      outline: 0;
    }
  }

  &__title {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: row;

    &--task {
      position: relative;
      display: flex;
    }

    &--days {
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      user-select: none;
      font-size: 1rem;
    }

    &--day {
      position: relative;
      flex: 1 1 100%;
      flex-wrap: nowrap;
      overflow: hidden;
      width: 0;
      outline: 0;
    }
  }

  &__head--weekday,
  &__head--date {
    display: flex;
    flex-wrap: nowrap;
    user-select: none;
    margin: 2px;
    flex: 1 0 0;
  }

  &__container {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  &__body {
    position: relative;
    display: flex;
    flex: 1 1 60%;
    overflow: hidden;
  }

  &__scroll-area {
    overflow: auto;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
  }

  &__task {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: row;
    width: 100%;

    &--section {
      position: relative;
      display: flex;
      flex: none;
      flex-direction: row;
      width: 100%;
    }

    &--container {
      position: relative;
      min-height: 22px;
    }

    &--item {
      position: relative;
      display: flex;
      flex: none;
      flex-direction: row;
    }

    &--days-row {
      position: relative;
      display: flex;
      flex: none;
    }

    &--day {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  &__footer {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;

    &--wrapper {
      position: relative;
      display: flex;
      flex: none;
      flex-direction: row;
    }

    &--task,
    &--day-wrapper {
      position: relative;
      display: flex;
      flex: none;
      flex-direction: row;
    }
  }
}

// sticky
.q-calendar-task__head.q-calendar__sticky {
  position: sticky;
  left: 0; /* rtl:ignore */
  top: 0;
  z-index: 2;
}

.q-calendar-task__head--tasks.q-calendar__sticky {
  position: sticky;
  left: 0; /* rtl:ignore */
  top: 0;
  z-index: 2;
}

.q-calendar-task__title--task.q-calendar__sticky {
  position: sticky;
  left: 0; /* rtl:ignore */
  top: 0;
  z-index: 2;
}

.q-calendar-task__task--container.q-calendar__sticky {
  position: sticky;
  left: 0; /* rtl:ignore */
  z-index: 1;
}

.q-calendar-task__task--item.q-calendar__sticky {
  position: sticky;
  left: 0; /* rtl:ignore */
  z-index: 1;
}

.q-calendar-task__footer.q-calendar__sticky {
  position: sticky;
  left: 0; /* rtl:ignore */
  bottom: 0;
  z-index: 1;
}

.q-calendar-task__footer--task.q-calendar__sticky {
  position: sticky;
  left: 0; /* rtl:ignore */
  bottom: 0;
  z-index: 2;
}

.q-calendar-task__footer--day.q-calendar__sticky {
  position: sticky;
  left: 0; /* rtl:ignore */
  z-index: 2;
}

// coloring and other vars
.q-calendar-task {
  &__head {
    color: var(--calendar-color);
    background: var(--calendar-background);
    border-bottom: var(--calendar-border);
    font-weight: var(--calendar-head-font-weight);

    &--tasks {
      color: var(--calendar-color);
      background: var(--calendar-background);
      border-right: var(--calendar-border);
    }

    &--day {
      border-right: var(--calendar-border);

      &:last-child {
        border-right: none;
      }

      &.q-active-date .q-calendar__button {
        color: var(--calendar-active-date-color);
        background: var(--calendar-active-date-background);
      }

      &.q-current-day .q-calendar__button {
        border: var(--calendar-border-current);
      }

      &.q-disabled-day {
        color: var(--calendar-disabled-date-color);
        background: var(--calendar-disabled-date-background) !important;
      }
    }
  }

  &__title {
    color: var(--calendar-color);
    background: var(--calendar-background);
    border-top: var(--calendar-border);

    &--task {
      color: var(--calendar-color);
      background: var(--calendar-background);
      border-right: var(--calendar-border);
    }

    &--day {
      border-right: var(--calendar-border);

      &:last-child {
        border-right: none;
      }

      &.q-disabled-day {
        color: var(--calendar-disabled-date-color);
        background: var(--calendar-disabled-date-background) !important;
      }
    }
  }

  &__task {
    border-bottom: var(--calendar-border);

    &:last-child {
      border-bottom: none !important;
      // border-bottom: var(--calendar-background) // hide border
    }

    &--section {
      border-bottom: var(--calendar-border-section);

      // &:last-child
      //   border-bottom: none !important
    }

    &--item {
      background: var(--calendar-background);
      border-right: var(--calendar-border);
    }

    &--day {
      border-right: var(--calendar-border);

      &:last-child {
        border-right: none;
      }
    }
  }

  &__footer {
    font-weight: var(--calendar-head-font-weight);

    &--wrapper {
      border-top: var(--calendar-border);
    }

    &--task {
      background: var(--calendar-background);
      border-right: var(--calendar-border);
    }

    &--day {
      background: var(--calendar-background);
      border-right: var(--calendar-border);

      &:last-child {
        border-right: none;
      }
    }
  }
}

// Dark mode
.q-dark div,
.body--dark div,
.q-calendar--dark {
  .q-calendar-task {
    &__head {
      color: var(--calendar-color-dark);
      background: var(--calendar-background-dark);
      border-bottom: var(--calendar-border-dark);

      &--tasks {
        color: var(--calendar-color-dark);
        background: var(--calendar-background-dark);
        border-right: var(--calendar-border-dark);
      }

      &--day {
        border-right: var(--calendar-border-dark);

        &.q-active-date .q-calendar__button {
          color: var(--calendar-active-date-color-dark);
          background: var(--calendar-active-date-background-dark);
        }

        &.q-current-day .q-calendar__button {
          border: var(--calendar-border-current-dark);
        }

        &.q-disabled-day {
          color: var(--calendar-disabled-date-color-dark);
          background: var(--calendar-disabled-date-background-dark) !important;
        }
      }
    }

    &__title {
      color: var(--calendar-color-dark);
      background: var(--calendar-background-dark);
      border-top: var(--calendar-border-dark);

      &--task {
        color: var(--calendar-color-dark);
        background: var(--calendar-background-dark);
        border-right: var(--calendar-border-dark);
      }

      &--day {
        border-right: var(--calendar-border-dark);

        &.q-disabled-day {
          color: var(--calendar-disabled-date-color-dark);
          background: var(--calendar-disabled-date-background-dark) !important;
        }
      }
    }

    &__task {
      border-bottom: var(--calendar-border-dark);

      &--section {
        border-bottom: var(--calendar-border-section-dark);
      }

      &--item {
        background: var(--calendar-background-dark);
        border-right: var(--calendar-border-dark);
      }

      &--day {
        border-right: var(--calendar-border-dark);
      }
    }

    &__footer {
      &--wrapper {
        border-top: var(--calendar-border-dark);
      }

      &--task {
        background: var(--calendar-background-dark);
        border-right: var(--calendar-border-dark);
      }

      &--day {
        background: var(--calendar-background-dark);
        border-right: var(--calendar-border-dark);
      }
    }
  }
}