.MIRECO-day-calendar
  width: 18rem
  height: 18rem
  font-size: 0.875rem

  > table
    tbody
      tr
        td, th
          text-align: center
          font-weight: normal
        td
          padding: 1px 0

          button
            position: relative
            border: none
            &:focus
              outline: none
              border: none
            &:not(:disabled):not(.disabled)
              cursor: pointer

          button
            background: var(--bs-body-bg)
            color: var(--bs-body-color)
            &:hover
              background: content-hover-colour
          &.current
            button
              background: var(--bs-primary)
              color: primary-button-text-colour
              &:hover
                background: primary-button-hover-colour
          &:not(.current).selected
            button
              background: var(--bs-primary-bg-subtle)
              color: contained-text-colour
              &:hover
                background: contained-hover-colour

          &.invalid
            opacity: 0.1
          &.outside-month
            button
              opacity: 0.7
          &.highlight
            button:after
              content: ' '
              position: absolute
              top: 0
              left: 0
              right: 0
              bottom: 0
              border-top: 1px dashed var(--bs-primary)
              border-bottom: 1px dashed var(--bs-primary)
            &.first-highlight button:after
              border-left: 1px dashed var(--bs-primary)
              border-top-left-radius: 4px
              border-bottom-left-radius: 4px
            &.last-highlight button:after
              border-right: 1px dashed var(--bs-primary)
              border-top-right-radius: 4px
              border-bottom-right-radius: 4px

          &.selected
            &.first-selected button
              border-top-left-radius: 4px
              border-bottom-left-radius: 4px
            &.last-selected button
              border-top-right-radius: 4px
              border-bottom-right-radius: 4px

          &:not(.selected)
            button:hover
              border-radius: 4px

          corner-tag-size = 10px
          corner-tag-margin = 2px
          position: relative
          &.today:after
            content: ''
            position: absolute
            left: 30%
            right: 30%
            top: 75%
            height: 3px
            border-radius: 1.5px
            background: #0dcaf0
            pointer-events: none