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

  &__head {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;

    &--wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1 1 100%;
    }

    &--workweek {
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      user-select: none;
      padding: 0;
      justify-content: center;
      align-items: center;
      font-size: 1rem;
    }

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

    &--events {
      position: relative;
      display: flex;
      flex: 1 1 100%;
      flex-direction: row;
      flex-wrap: nowrap;
    }

    &--weekday {
      position: relative;
      display: flex;
      flex: 1 0 100%;
      flex-direction: column;
      justify-content: flex-start;
      height: auto;
      overflow: hidden;
      user-select: none;
      outline: 0;
    }
  }

  &__body {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  &__week {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex: 10000 1 0%;

    &--wrapper {
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow: hidden;
      min-width: 100%;
      transition: height 0.3s;
    }

    &--auto-height {
      flex: 1 1 auto;
    }

    &--days {
      position: relative;
      height: auto;
      display: flex;
      flex: 1 0 auto;
      flex-wrap: nowrap;
      padding: 0;
    }

    &--events {
      position: absolute;
      margin-top: 28px;
      width: 100%;
      overflow: hidden;
    }
  }

  &__workweek {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    user-select: none;
    padding: 0;
    align-items: center;
  }

  &__day {
    position: relative;
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    height: auto;
    overflow: hidden;
    user-select: none;
    outline: 0;

    &--content {
      position: relative;
      width: 100%;
      height: auto;
      flex: 1 0 auto;
      flex-direction: column;
      min-width: 100%;
    }

    &--label {
      text-decoration: none;
      user-select: none;

      &__wrapper {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        min-width: 100%;
        min-height: 22px;
      }
    }

    &--month {
      position: relative;
      text-decoration: none;
      user-select: none;
      padding: 1px;
      font-size: 0.75em;
      line-height: 22px;
      transition: font-size 0.3s;
    }

    &--day-of-year {
      position: relative;
      text-decoration: none;
      user-select: none;
      box-shadow: none;
      font-size: 0.6rem;
      padding: 1px;
    }
  }
}

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

    &--workweek {
      font-size: var(--calendar-work-week-font-size);
      border-right: var(--calendar-border);
      max-width: var(--calendar-work-week-width);
      min-width: var(--calendar-work-week-width);
    }

    &--weekday {
      border-right: var(--calendar-border);
      font-weight: var(--calendar-head-font-weight);

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

    &--event {
      border-right: var(--calendar-border);
      font-weight: var(--calendar-head-font-weight);

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

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

  &__workweek {
    font-size: var(--calendar-work-week-font-size);
    border-right: var(--calendar-border);
    max-width: var(--calendar-work-week-width);
    min-width: var(--calendar-work-week-width);

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

  &__week--wrapper {
    border-bottom: var(--calendar-border);

    &:last-child {
      border-bottom: none !important;
    }
  }

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

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

    &.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;
    }

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

    &.q-selected {
      color: var(--calendar-selected-color);
      background: var(--calendar-selected-background);

      .q-current-day {
        .q-calendar__button {
          // inverted
          border: var(--calendar-border-current-dark) !important;
        }
      }
    }

    &.q-range-first,
    &.q-range-last,
    &.q-range {
      color: var(--calendar-range-color);
      background: var(--calendar-range-background);

      .q-current-day {
        .q-calendar__button {
          // inverted
          border: var(--calendar-border-current-dark) !important;
        }
      }
    }
  }
}

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

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

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

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

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

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

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

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

      &:last-child {
        border-bottom: none !important;
      }
    }

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

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

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

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

        color: var(--calendar-current-color-dark) !important;
        background: var(--calendar-current-background-dark);

        .q-calendar__button {
          border: var(--calendar-border-current-dark) !important;
          background: var(--calendar-current-background-dark);
        }
      }

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

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

      &.q-selected {
        color: var(--calendar-selected-color-dark);
        background: var(--calendar-selected-background-dark);

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

      &.q-range-first,
      &.q-range-last,
      &.q-range {
        color: var(--calendar-range-color-dark);
        background: var(--calendar-range-background-dark);

        .q-current-day {
          .q-calendar__button {
            // inverted
            border: var(--calendar-border-current) !important;
          }
        }
      }
    }
  }
}

.q-day-event {
  &:first-child {
    margin-top: 0em;
  }
}