.q-calendar-scheduler
  display: flex
  flex: 1
  flex-direction: column
  flex-wrap: nowrap
  height: 100%
  width: 100%

  &__head
    position: relative
    flex: none
    display: flex
    flex-direction: row

    &--resources
      display: flex
      flex-direction: row

    &--days

      &__body
        position: relative
        display: flex
        flex-direction: row
        flex: 10000 1 0%
        user-select: none

      &__column
        position: relative
        display: flex
        flex-direction: column
        flex: 1 1 100%
        user-select: none

      &__weekdays
        position: relative
        display: flex
        flex-direction: row
        flex-wrap: nowrap
        user-select: none
        font-size: 1rem

      &__event
        position: relative
        display: flex
        flex-direction: row
        flex-wrap: nowrap
        height: auto

      &__events
        position: absolute
        display: flex
        flex-direction: row
        flex-wrap: nowrap
        bottom: 0
        left: 0
        right: 0

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

      &__event
        position: relative
        flex: 1 1 auto
        flex-wrap: nowrap
        overflow: hidden

  &__head--weekday,
  &__head--date,
  &__column-header--before,
  &__column-header--after
    display: flex
    flex-wrap: nowrap
    user-select: none
    font-size: 1rem

  &__head--weekday,
  &__head--date
    margin: 2px
    flex: 1 0 0

  &__head--day__label
    user-select: none
    cursor: pointer

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

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

  &__pane
    width: 100%
    overflow: hidden
    flex: none
    display: flex
    align-items: flex-start

  &__day--container
    position: relative
    display: flex
    flex: 1
    flex-direction: column

  &__resources
    &--column
      position: relative
      display: flex
      flex-direction: column
      flex: 1 1 100%
      user-select: none

  &__resource
    position: relative
    display: flex
    align-items: center
    outline: 0

    &--interval
      position: relative
      display: flex
      align-items: center
      text-align: left
      vertical-align: middle
      outline: 0

    &--section
      position: relative
      display: flex
      align-items: center
      text-align: left
      vertical-align: middle
      outline: 0

    &--text
      position: relative
      display: block
      font-size: 12px
      text-align: left
      margin-left: 2px

    &--row
      position: relative
      display: flex
      flex: 1 0 100%

    &--days
      flex: 1 1 60%
      overflow: hidden
      display: flex
      position: relative

  &__day
    position: relative
    display: flex
    flex-direction: column
    flex: 1
    outline: 0

    &--section
      position: relative
      display: flex
      flex-direction: column
      flex: 1
      outline: 0

  &__day--resource
    position: relative
    width: 100%
    outline: 0
    overflow: hidden

    &__section
      position: relative
      width: 100%
      outline: 0
      overflow: hidden

// sticky
.q-calendar-scheduler__resource.q-calendar__sticky,
.q-calendar-scheduler__resource--section.q-calendar__sticky
  position: sticky
  left: 0 #{"/* rtl:ignore */"}
  z-index: 1

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

.q-calendar-scheduler__head--resources.q-calendar__sticky
  position: sticky
  left: 0 #{"/* rtl:ignore */"}
  top: 0
  z-index: 3

// coloring and other vars
.q-calendar-scheduler

  &__head
    border-bottom: var(--calendar-border)
    color: var(--calendar-color)
    background: var(--calendar-background)
    font-weight: var(--calendar-head-font-weight)

    &--resources
      border-right: var(--calendar-border)
      color: var(--calendar-color)
      background: var(--calendar-background)
      min-width: var(--calendar-resources-width)
      max-width: var(--calendar-resources-width)

  &__resource
    border-right: var(--calendar-border)
    color: var(--calendar-color)
    background: var(--calendar-background)
    min-width: var(--calendar-resources-width)
    max-width: var(--calendar-resources-width)

    &--section
      border-right: var(--calendar-border)
      color: var(--calendar-color)
      background: var(--calendar-background)
      min-width: var(--calendar-resources-width)
      max-width: var(--calendar-resources-width)

  &__head--day
    border-right: var(--calendar-border)
    font-weight: var(--calendar-head-font-weight)

    &: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

    &__event
      border-right: var(--calendar-border)

      &:last-child
        border-right: none

  &__column-header--before
    border-bottom: var(--calendar-border)

  &__column-header--after
    border-top: var(--calendar-border)

  &__resources
    &--column
      border-right: var(--calendar-border)
      min-width: var(--calendar-resources-width)
      max-width: var(--calendar-resources-width)

  &__resource
    &--row
      border-top: var(--calendar-border)

      &:first-child
        border-top: none !important

  &__day,
  &__day--section
    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

  &__day--resource
    border-top: var(--calendar-border)

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

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

    &__section
      border-top: var(--calendar-border-section)

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

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

    &:first-child
      border-top: none !important

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

  .q-calendar__child--expanded > .q-calendar-scheduler__resource--row
    border-top: var(--calendar-border) !important

.q-dark div,
.body--dark div,
.q-calendar--dark

  .q-calendar-scheduler

    &__head
      border-bottom: var(--calendar-border-dark)
      color: var(--calendar-color-dark)
      background: var(--calendar-background-dark)

    &__resource
      border-right: var(--calendar-border-dark)
      color: var(--calendar-color-dark)
      background: var(--calendar-background-dark)

      &--section
        border-right: var(--calendar-border-dark)
        color: var(--calendar-color-dark)
        background: var(--calendar-background-dark)

    &__head--resources
      border-right: var(--calendar-border-dark)
      color: var(--calendar-color-dark)
      background: var(--calendar-background-dark)

    &__head--day
      border-right: var(--calendar-border-dark)
      font-weight: var(--calendar-head-font-weight)

      &:last-child
        border-right: none

      &.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)

      &__event
        border-right: var(--calendar-border-dark)

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

    &__column-header--before
      border-bottom: var(--calendar-border-dark)

    &__column-header--after
      border-top: var(--calendar-border-dark)

    &__resources
      &--column
        border-right: var(--calendar-border-dark)

    &__resource
      &--row
        border-top: var(--calendar-border-dark)

    &__day,
    &__day--section
      border-right: var(--calendar-border-dark)

      &:last-child
        border-right: none

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

    &__day--resource
      border-top: var(--calendar-border-dark)

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

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

      &:first-child
        border-top: none !important

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

      &__section
        border-top: var(--calendar-border-section-dark)

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

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

    .q-calendar__child--expanded > .q-calendar-scheduler__resource--row
      border-top: var(--calendar-border-dark) !important