.MIRECO-time-range-popover .MIRECO-advanced-popover-header
  display: flex
  flex-direction: row
  align-items: center

  button
    padding: 0rem 0.4rem
    font-weight: 400
    text-align: center
    vertical-align: middle
    user-select: none

    font-size: 0.9rem
    line-height: 1.5
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
    cursor: pointer

    color: #000
    background-color: #eee
    border: var(--bs-border-width) solid var(--bs-border-color)

    &:hover
      background-color: #e1e1e1

  button.shortcuts
    border-radius: 0.375rem
    margin-right: 0.25rem

  > div
    flex: 1
    text-align: center
    display: flex
    padding: 0.25rem
    background: #eee
    border-radius: 0.375rem

    button
      padding: 0 0.8rem
      flex: 1
      border-radius: 0.25rem
      border: var(--bs-border-width) solid rgba(0, 0, 0, 0)

      &.active
        color: #000
        border: var(--bs-border-width) solid var(--bs-border-color)
        background-color: #fff
        &:hover
          background-color: #f8f9fa