.q-calendar-mini {
  .q-calendar-month {
    &__head {
      border: 0 !important;

      &--workweek {
        border-right: unset;
        border-bottom: unset;
      }

      &--weekday {
        border-right: 0 !important;
        min-height: 1.5em !important;
        min-width: 1.5em !important;
      }
    }

    &__workweek {
      border-right: unset;
      font-size: 1em;
    }

    &__week {
      &--wrapper {
        border-bottom: 0;
      }
    }

    &__day {
      display: flex;
      justify-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      padding: 0;
      border: 0 !important;
      min-height: 1.5em !important;
      min-width: 1.5em !important;

      &--content {
        height: auto;
      }

      &--label {
        position: relative;
        vertical-align: middle;
        text-align: center;
        top: unset;
        left: unset;
      }
    }
  }

  // coloring and other vars
  .q-calendar-month {
    &__head {
      &--workweek {
        max-width: var(--calendar-mini-work-week-width);
        min-width: var(--calendar-mini-work-week-width);
      }
    }

    &__workweek {
      max-width: var(--calendar-mini-work-week-width);
      min-width: var(--calendar-mini-work-week-width);
    }

    &__day {
      &.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-selected {
        color: var(--calendar-mini-selected-color);
        background: var(--calendar-mini-selected-background) !important;

        .q-calendar__button {
          color: var(--calendar-mini-selected-label-color) !important;
          background: var(--calendar-mini-selected-label-background) !important;
        }
      }

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

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

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

        .q-calendar__button {
          color: var(--calendar-mini-range-firstlast-label-color) !important;
          background: var(--calendar-mini-range-firstlast-label-background) !important;
        }
      }

      &.q-range {
        color: unset;
        background: unset;

        &.q-range-hover {
          color: var(--calendar-mini-range-hover-color);
        }
      }

      &.q-range-first,
      &.q-range-last,
      &.q-range {
        .q-calendar-month__day--label__wrapper {
          &:before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0; /* rtl:ignore */
            background: var(--calendar-mini-range-connector-color);
          }

          &.q-range-hover {
            &:before {
              content: '';
              display: block;
              position: absolute;
              width: 100%;
              margin: 1px 0 1px 0;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0; /* rtl:ignore */
              color: var(--calendar-color);
              background: var(--calendar-background);
              border-top: var(--calendar-mini-range-connector-hover-border);
              border-bottom: var(--calendar-mini-range-connector-hover-border);
            }
          }
        }

        &.q-range-first,
        &.q-range-last {
          .q-calendar-month__day--label__wrapper {
            .q-calendar__button {
              color: var(--calendar-mini-range-firstlast-label-color) !important;
              background: var(--calendar-mini-range-firstlast-label-background) !important;
              border-radius: 50%;
            }
          }
        }

        &.q-range-first {
          .q-calendar-month__day--label__wrapper {
            &:before {
              width: 50%;
              left: 50%;
            }

            &.q-range-hover {
              &:before {
                width: 50%;
                left: 50%;
              }
            }
          }
        }

        &.q-range-last {
          .q-calendar-month__day--label__wrapper {
            &:before {
              width: 50%;
              right: auto;
            }

            // when first and last are same day
            &.q-range-first {
              &:before {
                width: 0;
              }
            }

            &.q-range-hover {
              &:before {
                width: 50%;
                right: auto;

                // when first and last are same day
                &.q-range-first {
                  &:before {
                    width: 0;
                  }
                }
              }
            }
          }
        }

        // fix issue with seeing :before on an in-range disabled button
        &.q-range-first,
        &.q-range-last {
          .q-button {
            opacity: 1 !important;
          }
        }
      }
    }
  }

  .q-day-event:not(.q-day-event-void) {
    .q-calendar-month__day--label__wrapper {
      &:after {
        content: '';
        width: 0.6em;
        height: 0.4em;
        border-radius: 50%;
        left: 0; /* rtl:ignore */
        right: 0;
        margin: auto;
        background: var(--calendar-selected-background);
      }
    }
  }

  .q-calendar-month__week {
    border-bottom: unset;
    max-width: 100%;
  }
}

.q-dark div,
.body--dark div,
.q-calendar--dark {
  .q-calendar-mini {
    &.q-calendar-month {
      color: var(--calendar-color-dark);
      background: var(--calendar-background-dark);
    }

    .q-calendar-month {
      &__head--workweek {
        border-right: unset;
        border-bottom: unset;
      }

      &__workweek {
        border-right: unset;
      }

      &__week--wrapper {
        border-bottom: unset;
      }

      &__day {
        &.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) !important;
          }
        }

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

          .q-calendar__button {
            color: var(--calendar-mini-selected-label-color-dark) !important;
            background: var(--calendar-mini-selected-label-background-dark) !important;
          }
        }

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

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

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

          &.q-range-hover {
            color: var(--calendar-mini-range-hover-color-dark);
          }
        }

        &.q-range-first,
        &.q-range-last,
        &.q-range {
          .q-calendar-month__day--label__wrapper {
            &:before {
              background: var(--calendar-mini-range-connector-color-dark);
            }

            &.q-range-hover {
              &:before {
                color: var(--calendar-color-dark);
                background: var(--calendar-background-dark);
                border-top: var(--calendar-mini-range-connector-hover-border-dark);
                border-bottom: var(--calendar-mini-range-connector-hover-border-dark);
              }
            }
          }
        }

        // fix issue with seeing :before on an in-range disabled button
        &.q-range-first,
        &.q-range-last {
          .q-calendar__button {
            opacity: 1 !important;
          }
        }
      }
    }

    .q-day-event:not(.q-day-event-void) {
      .q-calendar-month__day--label__wrapper {
        &:after {
          background: var(--calendar-selected-background-dark);
        }
      }
    }
  }
}