@import '../node_modules/mireco/dist/layout.css'

primary-button-text-colour = #fff
primary-button-hover-colour = #0b5ed7
content-hover-colour = #eee
contained-hover-colour = hsl(216, 90%, 84%)
contained-text-colour = #333
disabled-selected-colour = darken(#e9ecef, 10%)

@import 'components/advanced-popover'
@import 'components/clear-button'
@import 'components/controls-popover'
@import 'components/day-calendar'
@import 'components/dropdown'
@import 'components/month-calendar'
@import 'components/time-range-popover'
@import 'components/time-selector'
@import 'components/widget-block'

@import 'inputs/multi-select'
@import 'inputs/date-range'
@import 'inputs/datetime-range'

.MIRECO-spinner
  path
    stroke: var(--bs-primary) !important

.MIRECO-widget-text
  > .MIRECO-clear-button
    right: 0

.MIRECO-widget-block, .MIRECO-multi-select .MIRECO-text
  &.has-icon
    > .MIRECO-clear-button
      right: calc(0.6rem + 24px)
    > svg
      right: 0.375rem
    &:after
      content: ' '
      position: absolute
      top: 6px
      right: calc(0.6rem + 24px)
      height: calc(100% - 12px)
      border-right: var(--bs-border-width) solid var(--bs-border-color)

.MIRECO-widget-block.form-control
  padding: 0
  height: auto
  &:not(.block)
    width: auto
  &:not(.disabled)
    cursor: text
    &.in-focus
      border-color: #86b7fe
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)
  &.disabled
    background-color: var(--bs-secondary-bg)
    color: var(--bs-body-color)
    opacity: 1
    // wish this was not necessary
    &:focus
      border: var(--bs-border-width) solid var(--bs-border-color)
      box-shadow: none
    input::placeholder
      color: var(--bs-secondary-color)
      opacity: 1

input.MIRECO-blockable.form-control:not(.block)
  display: inline-block

.MIRECO-text.MIRECO-embedded
  border: none
  background: none
  padding: 0.375rem 0.75rem
  &:focus-visible
    outline: none

.MIRECO-datetime-controls, .MIRECO-datetime-range-controls
  .MIRECO-time-selector
    height: 18rem

.MIRECO-day-calendar, .MIRECO-month-calendar
  > .calendar-header
    margin: 0.5rem 0
    h5
      margin: 0
      font-size: 0.875rem
      font-weight: normal
      text-align: center
    button
      background: none
      outline: none
      border: none
      margin: 0
      cursor: pointer
      svg path
        stroke: #888 !important
      &:hover svg path
        stroke: var(--bs-body-color) !important

.MIRECO-widget-block.form-control input
  color: inherit

p.MIRECO-embedded
  padding: 0.375rem 0.3rem
  padding-left: 0.75rem
  font-size: 1rem
  line-height: 1.5
  margin: 0