@import "../utilities/mixins"

$number-background: var(--background, #{$background}) !default
$number-radius-rounded: var(--radius-rounded, #{$radius-rounded}) !default
$number-font-size: var(--size-medium, #{$size-medium}) !default

.block
  @extend %block

.delete
  @extend %delete

.heading
  display: block
  font-size: 11px
  letter-spacing: 1px
  margin-bottom: 5px
  text-transform: uppercase

.loader
  @extend %loader

$css-vars-map: ('number-background': ($number-background),'number-radius-rounded': ($number-radius-rounded),'number-font-size': ($number-font-size))
// --number-background: var(--background, #{$background})
// --number-radius-rounded: var(--radius-rounded, #{$radius-rounded})
// --number-font-size: var(--size-medium, #{$size-medium})

.number, [class^="number-"]
  +registerCSSVars($css-vars-map, $at-root)

.number
  align-items: center
  background-color: var(--number-background)
  border-radius: var(--number-radius-rounded)
  display: inline-flex
  font-size: var(--number-font-size)
  height: 2em
  justify-content: center
  margin-right: 1.5rem
  min-width: 2.5em
  padding: 0.25rem 0.5rem
  text-align: center
  vertical-align: top