@govbr-ds/core/dist/components/wizard/wizard.min.css.map

Padrão Digital de Governo

{"version":3,"file":"components/wizard/wizard.min.css","mappings":"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","sources":["webpack://core/./src/components/wizard/_wizard.scss","webpack://core/./src/components/wizard/_mixins.scss","webpack://core/./src/partial/scss/mixins/_grid.scss","webpack://core/./src/partial/scss/mixins/_scrollbar.scss","webpack://core/./src/partial/scss/mixins/_focus.scss","webpack://core/./src/partial/scss/mixins/_states.scss","webpack://core/./src/components/button/_mixins.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}wizard {\n  @include wizard-configs;\n}\n","// Dependências\n@import \"../button/mixins\";\n\n// Mixins\n@mixin wizard-configs {\n  @include wizard-tokens;\n  @include wizard-default;\n  @include wizard-progress;\n  @include wizard-progress-btn;\n  @include wizard-progress-collapsed;\n  @include wizard-form;\n  @include wizard-vertical;\n  @include wizard-dark-mode;\n}\n\n@mixin wizard-tokens {\n  --wizard-min-height: 300px;\n  --wizard-max-height: 800px;\n}\n\n@mixin wizard-default {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  margin-bottom: var(--spacing-scale-4x);\n  max-height: var(--wizard-max-height);\n  max-width: none;\n  min-height: var(--wizard-min-height);\n}\n\n@mixin wizard-progress {\n  .wizard-progress {\n    background-color: var(--background-alternative);\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n    grid-template-rows: none;\n    min-height: 164px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding-top: var(--spacing-scale-7x);\n    width: 100%;\n  }\n  @include media-breakpoint-down(sm) {\n    .wizard-progress {\n      max-height: 100px;\n      min-height: 100px;\n      overflow-y: hidden;\n      padding-top: var(--spacing-scale-3x);\n      position: relative;\n      transition-delay: 0s;\n      transition-duration: 0.25s;\n      transition-property: all;\n      transition-timing-function: linear;\n\n      // Ajuste Grip Lines\n      &::after {\n        background-color: transparent;\n        bottom: 2px;\n        color: var(--interactive);\n        content: \"\\f7a4\";\n        display: block;\n        font-family: \"Font Awesome 5 Free\", sans-serif;\n        font-size: var(--switch-icon-size);\n        font-weight: var(--font-weight-black);\n        height: 1em;\n        left: 50%;\n        margin-left: -0.5em;\n        position: absolute;\n        top: unset;\n        transition-delay: 0s;\n        transition-duration: 0.25s;\n        transition-property: all;\n        transition-timing-function: linear;\n        width: auto;\n      }\n    }\n  }\n}\n\n@mixin wizard-progress-btn {\n  .wizard-progress-btn {\n    background-color: transparent;\n    border: 0;\n    box-shadow: none !important;\n    color: var(--interactive);\n    font-size: var(--font-size-scale-up-01, 16.8px);\n    line-height: 19px;\n    max-height: 90px;\n    padding-bottom: 0;\n    padding-top: var(--spacing-scale-2x);\n    position: relative;\n    text-indent: 0;\n    transition-delay: 0s;\n    transition-duration: 0.15s;\n    transition-property: all;\n    transition-timing-function: linear;\n\n    &[disabled] {\n      color: rgba(var(--interactive-rgb), var(--disabled));\n      opacity: 1;\n\n      &::before {\n        opacity: var(--disabled);\n      }\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &.focus-visible:not([disabled]):not(.disabled)::before,\n    &:focus-visible:not([disabled]):not(.disabled)::before {\n      outline-color: var(--focus-color);\n      outline-offset: var(--focus-offset);\n      outline-style: var(--focus-style);\n      outline-width: var(--focus-width);\n    }\n\n    &:hover:not([disabled])::before {\n      background-image: linear-gradient(\n        rgba(var(--interactive-rgb), var(--hover)),\n        rgba(var(--interactive-rgb), var(--hover))\n      );\n    }\n\n    &:active:not([disabled])::before {\n      background-image: linear-gradient(\n        rgba(var(--interactive-rgb), var(--pressed)),\n        rgba(var(--interactive-rgb), var(--pressed))\n      );\n    }\n\n    &::before {\n      background-color: var(--background);\n      border: 2px solid var(--interactive);\n      border-radius: 50%;\n      box-sizing: border-box;\n      color: var(--interactive);\n      content: attr(step) !important;\n      display: block;\n      font-size: var(--font-size-scale-up-02, 20.16px);\n      font-weight: var(--font-weight-semi-bold, 600);\n      height: 36px;\n      left: 50%;\n      line-height: 29px;\n      margin-top: -13px;\n      position: absolute;\n      top: 0;\n      transform: translateX(-50%);\n      transition:\n        all 0.15s linear 0s,\n        transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;\n      width: 36px;\n      z-index: 3;\n    }\n\n    &::after {\n      background-color: var(--interactive) !important;\n      content: \"\";\n      display: block;\n      height: 1px;\n      left: calc(-50% + 17px);\n      position: absolute;\n      top: 5px;\n      transition-delay: 0s;\n      transition-duration: 0.15s;\n      transition-property: all;\n      transition-timing-function: linear;\n      width: calc(100% - 34px);\n      z-index: 1;\n    }\n\n    &:first-child::after {\n      display: none;\n    }\n\n    &[active] {\n      color: var(--active);\n      font-weight: var(--font-weight-semi-bold, $font-weight-semi-bold);\n\n      &::after {\n        background-color: var(--active);\n      }\n\n      &::before {\n        background-color: var(--active);\n        border: 2px solid var(--background-light);\n        color: var(--background-light);\n        font-weight: var(--font-weight-bold, $font-weight-bold);\n      }\n    }\n  }\n\n  @include media-breakpoint-down(sm) {\n    .wizard-progress-btn {\n      .info {\n        font-size: var(--font-size-scale-down-02, $font-size-scale-down-02);\n        line-height: 1em;\n        text-align: center;\n      }\n    }\n  }\n}\n\n@mixin wizard-progress-collapsed {\n  @include media-breakpoint-down(sm) {\n    &[collapsed] {\n      .wizard-progress {\n        max-height: 64px;\n        min-height: 64px;\n        overflow-y: hidden;\n        padding-bottom: var(--spacing-scale-3x);\n        padding-top: var(--spacing-scale-3x);\n\n        &::after {\n          margin-top: var(--spacing-scale-4xh);\n        }\n      }\n\n      .wizard-progress-btn {\n        padding-bottom: var(--spacing-scale-base);\n\n        .info {\n          display: none;\n        }\n      }\n\n      .wizard-form {\n        height: auto;\n      }\n\n      .wizard-panel-content {\n        overflow-x: hidden;\n        overflow-y: auto;\n      }\n    }\n  }\n}\n\n@mixin wizard-form {\n  .wizard-form {\n    display: flex;\n    flex: 1;\n    height: auto;\n    overflow: hidden;\n    position: relative;\n  }\n\n  .wizard-panel {\n    display: none;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    height: auto;\n    left: 0;\n    margin-bottom: 0;\n    opacity: 0;\n    position: static;\n    top: 0;\n    visibility: hidden;\n    width: 100%;\n\n    &[active] {\n      display: flex;\n      height: auto;\n      left: 0 !important;\n      opacity: 1;\n      transition-delay: 0s;\n      transition-duration: 0.5s;\n      transition-property: all;\n      transition-timing-function: linear;\n      visibility: visible;\n      // animation: slide-left 0.5s linear both;\n    }\n\n    @keyframes slide-left {\n      0% {\n        opacity: 0;\n        transform: translateX(1%);\n      }\n\n      100% {\n        opacity: 1;\n        transform: translateX(0);\n      }\n    }\n  }\n\n  .wizard-panel-content {\n    border-top: 1px solid var(--border-color);\n    flex-grow: 1;\n    height: auto;\n    max-height: none;\n    overflow-x: auto;\n    overflow-y: auto;\n    padding: var(--spacing-scale-base) var(--spacing-scale-2x);\n    @include scrollbar;\n\n    &:focus,\n    &:focus-visible,\n    &.focus-visible {\n      @include focus-soft;\n    }\n\n    > :last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .wizard-panel-btn {\n    align-self: flex-end;\n    background-color: var(--background-alternative);\n    border-top: 1px solid var(--border-color);\n    height: fit-content;\n    margin-top: 1px;\n    padding: var(--spacing-scale-2x) 1.5%;\n    width: 100%;\n  }\n\n  .wizard-btn-next,\n  .wizard-btn,\n  .wizard-btn-prev {\n    float: right;\n    margin-left: var(--spacing-scale-2x);\n  }\n\n  .wizard-btn-canc {\n    float: left;\n  }\n\n  @include media-breakpoint-down(sm) {\n    .wizard-form {\n      height: auto;\n    }\n\n    .wizard-panel {\n      border-top: 0;\n      display: none;\n      flex-wrap: nowrap;\n      margin-bottom: 0;\n      max-height: none;\n    }\n\n    .wizard-panel-content {\n      height: auto;\n      max-height: 100%;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: var(--spacing-scale-half) var(--spacing-scale-base);\n      transition-delay: 0s;\n      transition-duration: 0.25s;\n      transition-property: all;\n      transition-timing-function: linear;\n    }\n\n    .wizard-panel-btn {\n      align-items: flex-end;\n      background-color: var(--background-alternative);\n      display: flex;\n      flex-wrap: wrap;\n      height: fit-content;\n      justify-content: center;\n      padding: 0 !important;\n      position: static;\n      width: 100%;\n    }\n\n    .wizard-btn-canc,\n    .wizard-btn-next,\n    .wizard-btn-prev,\n    .wizard-btn {\n      float: none;\n      margin: var(--spacing-scale-base) 5%;\n      width: 90%;\n    }\n\n    .wizard-btn-next,\n    .wizard-btn {\n      order: 1;\n    }\n  }\n}\n\n@mixin wizard-vertical {\n  &[vertical] {\n    flex-direction: row;\n\n    .wizard-progress {\n      flex: 1;\n      float: none;\n      grid-template-columns: 1fr;\n      height: auto;\n      max-width: 260px;\n      overflow-x: hidden;\n      padding-top: 0;\n      position: relative;\n      text-align: right;\n    }\n\n    .wizard-progress-btn {\n      height: 100%;\n      line-height: 100%;\n      max-height: 100%;\n      padding-bottom: 0;\n      padding-right: 70px;\n      padding-top: 0;\n      text-align: right;\n\n      &::before {\n        left: calc(100% - 32px);\n        line-height: 26px;\n        margin-top: calc(var(--spacing-scale-2x) * -1);\n        position: absolute;\n        text-align: center;\n        top: 50%;\n      }\n\n      &::after {\n        height: calc(100% - 34px);\n        left: calc(100% - 33px);\n        position: absolute;\n        top: calc(-50% + 18px);\n        width: 1px;\n      }\n\n      &[active]::after {\n        width: 1px;\n      }\n    }\n\n    &[scroll] {\n      .wizard-progress {\n        overflow-y: auto;\n        @include scrollbar;\n\n        .wizard-progress-btn {\n          min-height: 100px;\n        }\n      }\n    }\n\n    .wizard-form {\n      float: none;\n      height: auto;\n      width: calc(100% - 260px);\n\n      .wizard-panel {\n        .wizard-panel-content {\n          border-top: 0;\n        }\n      }\n    }\n  }\n\n  @include media-breakpoint-down(sm) {\n    &[vertical] {\n      .wizard-progress {\n        max-height: 100%;\n        max-width: 110px;\n\n        &::after {\n          height: 1em;\n          left: unset;\n          margin-top: -0.5em;\n          right: 2px;\n          top: 50%;\n          transform: rotate(-90deg);\n          width: 1em;\n        }\n      }\n\n      .wizard-progress-btn {\n        line-height: 18px;\n        padding-right: var(--spacing-scale-7x);\n\n        .info {\n          line-height: 1.6em;\n          margin-top: -0.5em;\n          position: absolute;\n          right: 54px;\n        }\n      }\n\n      .wizard-form {\n        height: auto;\n        max-width: calc(100% - 110px);\n        min-width: calc(100% - 110px);\n        transition-delay: 0s;\n        transition-duration: 0.25s;\n        transition-property: all;\n        transition-timing-function: linear;\n      }\n\n      .wizard-panel {\n        height: 100%;\n        max-height: 100%;\n      }\n\n      &[collapsed] {\n        .wizard-progress {\n          max-width: 60px;\n          padding-bottom: 0;\n          padding-top: 0;\n        }\n\n        .wizard-progress-btn {\n          padding-right: 0;\n\n          .info {\n            display: none;\n          }\n        }\n\n        .wizard-form {\n          max-width: calc(100% - 60px);\n          min-width: calc(100% - 60px);\n        }\n      }\n    }\n  }\n}\n\n@mixin wizard-dark-mode {\n  &.inverted,\n  &.dark-mode {\n    @include dark-mode;\n    @include button-dark-mode;\n\n    .wizard-progress {\n      background-color: transparent;\n    }\n\n    .wizard-progress-btn {\n      &[active] {\n        color: var(--color);\n\n        &::before {\n          --interactive-rgb: var(--active-rgb);\n          background-color: var(--color);\n          color: var(--active);\n        }\n      }\n    }\n\n    .wizard-panel {\n      .wizard-panel-btn {\n        background-color: transparent;\n      }\n    }\n  }\n}\n","// Dependência para calcular divisão\n@use \"sass:math\";\n\n/// Aplica os estilos **a partir** do breakpoint informado\n/// @group 02\n/// @param {String} $breakpoint - **Usar**: xs, sm, md, lg ou xl\n/// @example scss - Aplicar estilos em **lg** e **xl**\n///  .#{$prefix}cookiebar {\n///    @include media-breakpoint-up(lg) {\n///      ...\n///    }\n///  }\n@mixin media-breakpoint-up($breakpoint) {\n  $size: map-get($breakpoints, $breakpoint);\n  @media (min-width: $size) {\n    @content;\n  }\n}\n\n/// Aplica os estilos **até** o breakpoint informado\n/// @group 02\n/// @param {String} $breakpoint - **Usar**: xs, sm, md, lg ou xl\n/// @example scss - Aplicar estilos em **xs**, **sm** e **md**\n///  .#{$prefix}cookiebar {\n///    @include media-breakpoint-down(md) {\n///      ...\n///    }\n///  }\n@mixin media-breakpoint-down($breakpoint) {\n  $value: map-get($breakpoints, next-breakpoint($breakpoint)) - 1px;\n  @media (max-width: $value) {\n    @content;\n  }\n}\n\n/// Cria containers e linhas da Grid\n/// @group 03\n/// @param {String} $breakpoint - **Usar**: xs, sm, md, lg ou xl\n/// @example scss - Uso prático\n///  @include make-grid(lg);\n@mixin make-grid($breakpoint) {\n  $breakpoint-name: map-get($breakpoints-name, $breakpoint);\n  $breakpoint-width: map-get($breakpoints, $breakpoint);\n  @media (min-width: $breakpoint-width) {\n    .container,\n    .container-sm,\n    .container-md,\n    .container-lg,\n    .container-xl,\n    .container-fluid {\n      --grid-margin: var(--grid-#{$breakpoint-name}-margin);\n    }\n\n    .row {\n      --grid-gutter: var(--grid-#{$breakpoint-name}-gutter);\n    }\n    @if $breakpoint == \"sm\" {\n      .container,\n      .container-sm {\n        --grid-maxwidth: calc(var(--grid-breakpoint-#{$breakpoint}) - var(--grid-#{$breakpoint-name}-margin));\n      }\n    }\n    @if $breakpoint == \"md\" {\n      .container,\n      .container-sm,\n      .container-md {\n        --grid-maxwidth: calc(var(--grid-breakpoint-#{$breakpoint}) - var(--grid-#{$breakpoint-name}-margin));\n      }\n    }\n    @if $breakpoint == \"lg\" {\n      .container,\n      .container-sm,\n      .container-md,\n      .container-lg {\n        --grid-maxwidth: calc(var(--grid-breakpoint-#{$breakpoint}) - var(--grid-#{$breakpoint-name}-margin));\n      }\n    }\n    @if $breakpoint == \"xl\" {\n      .container,\n      .container-sm,\n      .container-md,\n      .container-lg,\n      .container-xl {\n        --grid-maxwidth: calc(var(--grid-breakpoint-#{$breakpoint}) - var(--grid-#{$breakpoint-name}-margin));\n      }\n    }\n    @include make-columns($grid-desktop-columns, $breakpoint);\n  }\n}\n\n/// Cria as colunas da Grid.\n/// @group 03\n/// @param {Number} $columns - **Usar**: 4, 8 ou 12\n/// @param {String} $breakpoint [null] - **Usar**: xs, sm, md, lg ou xl **(Opcional)**\n/// @example scss - Criar classes até 4 colunas\n///  @include make-columns(4);\n/// @example scss - Criar classes até 8 colunas para breakpoint **sm**\n///  @include make-columns(8, \"sm\");\n@mixin make-columns($columns, $breakpoint: null) {\n  .col#{if($breakpoint, \"-#{$breakpoint}\", \"\")} {\n    flex: 1 0 0%;\n    min-width: math.div(1, $columns) * 100%;\n  }\n  .col#{if($breakpoint, \"-#{$breakpoint}\", \"\")}-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  @for $i from 1 through $columns {\n    .col#{if($breakpoint, \"-#{$breakpoint}\", \"\")}-#{$i} {\n      flex-basis: math.div($i, $columns) * 100%;\n      max-width: math.div($i, $columns) * 100%;\n    }\n  }\n}\n","@mixin scrollbar {\n  &::-webkit-scrollbar {\n    height: var(--spacing-scale-base);\n    width: var(--spacing-scale-base);\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--gray-10);\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: var(--gray-30);\n  }\n\n  &:hover {\n    &::-webkit-scrollbar-thumb {\n      background: var(--gray-40);\n    }\n  }\n}\n","/// Aplica foco: feedback ao navegar por teclado no elemento\n/// @example scss - Uso prático\n///  a {\n///    @include focus;\n///  }\n@mixin focus {\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible,\n  &:focus-visible {\n    outline-color: var(--focus);\n    outline-offset: var(--focus-offset);\n    outline-style: var(--focus-style);\n    outline-width: var(--focus-width);\n  }\n}\n\n/// Aplica foco tênue\n/// @example scss - Uso prático\n///  input {\n///    &:focus,\n///    &:focus-visible,\n///    &.focus-visible {\n///      @include focus-soft;\n///    }\n///  }\n@mixin focus-soft {\n  border-color: var(--focus) !important;\n  box-shadow: 0 0 0 var(--surface-width-md) var(--focus);\n  outline: none;\n}\n","// Desabilitado\n@mixin disabled {\n  cursor: not-allowed;\n  opacity: var(--disabled);\n\n  * {\n    pointer-events: none;\n  }\n}\n\n// Dark mode\n@mixin dark-mode(\n  $color: \"color-dark\",\n  $color-rgb: \"color-dark-rgb\",\n  $text-color: $color,\n  $interactive: \"interactive-dark\",\n  $interactive-rgb: \"interactive-dark-rgb\",\n  $visited: \"visited-dark\",\n  $hover: \"hover-dark\",\n  $pressed: \"pressed-dark\",\n  $focus-color: \"focus-color-dark\",\n  $focus: $focus-color\n) {\n  --color: var(--#{$color});\n  --color-rgb: var(--#{$color-rgb});\n  --text-color: var(--#{$text-color});\n  --interactive: var(--#{$interactive});\n  --interactive-rgb: var(--#{$interactive-rgb});\n  --visited: var(--#{$visited});\n  --hover: var(--#{$hover});\n  --pressed: var(--#{$pressed});\n  --focus-color: var(--#{$focus-color});\n  --focus: var(--#{$focus});\n}\n@mixin light-mode(\n  $color: \"color-light\",\n  $color-rgb: \"color-light-rgb\",\n  $text-color: $color,\n  $interactive: \"interactive-light\",\n  $interactive-rgb: \"interactive-light-rgb\",\n  $visited: \"visited-light\",\n  $hover: \"hover-light\",\n  $pressed: \"pressed-light\",\n  $focus-color: \"focus-color-light\",\n  $focus: $focus-color\n) {\n  --color: var(--#{$color});\n  --color-rgb: var(--#{$color-rgb});\n  --text-color: var(--#{$text-color});\n  --interactive: var(--#{$interactive});\n  --interactive-rgb: var(--#{$interactive-rgb});\n  --visited: var(--#{$visited});\n  --hover: var(--#{$hover});\n  --pressed: var(--#{$pressed});\n  --focus-color: var(--#{$focus-color});\n  --focus: var(--#{$focus});\n}\n","@mixin button-configs {\n  @include button-tokens;\n  @include button-default;\n  @include button-block;\n  @include button-circle;\n  @include button-sizes;\n  @include button-emphasis;\n  @include button-colors;\n  @include button-states;\n  @include button-dark;\n}\n\n@mixin button-magicbutton {\n  --focus-offset: calc((var(--magic-support-size) - var(--magic-size)) * 0.5 + 4px);\n  --button-size: var(--magic-size);\n  background-color: var(--interactive-alternative);\n  color: var(--color-dark);\n  font-size: var(--font-size-scale-up-02);\n  font-weight: var(--font-weight-semi-bold);\n\n  &:not(:disabled) {\n    @include hover(\"color-dark\");\n    @include active(\"color-dark\");\n  }\n}\n\n@mixin button-tokens {\n  --button-radius: 100em;\n  --button-xsmall: 24px;\n  --button-small: 32px;\n  --button-medium: 40px;\n  --button-large: 48px;\n  --button-size: var(--button-medium);\n}\n\n@mixin button-default {\n  align-items: center;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--button-radius);\n  color: var(--interactive);\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-scale-up-01);\n  font-weight: var(--font-weight-semi-bold);\n  height: var(--button-size);\n  justify-content: center;\n  overflow: hidden;\n  padding: 0 var(--spacing-scale-3x);\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  width: auto;\n}\n\n@mixin button-block {\n  &.block {\n    width: 100%;\n  }\n  @each $breakpoint in \"sm\", \"md\", \"lg\", \"xl\" {\n    @include media-breakpoint-up(#{$breakpoint}) {\n      &.block-#{$breakpoint} {\n        width: 100%;\n      }\n      &.auto-#{$breakpoint} {\n        width: auto;\n      }\n    }\n  }\n}\n\n@mixin button-circle {\n  &.circle,\n  &[circle],\n  &.is-circle {\n    border-radius: 50%;\n    padding: 0;\n    width: var(--button-size);\n  }\n}\n\n@mixin button-sizes {\n  @each $size in \"xsmall\", \"small\", \"medium\", \"large\" {\n    &.#{$size},\n    &[#{$size}],\n    &.is-#{$size} {\n      --button-size: var(--button-#{$size});\n    }\n  }\n}\n\n@mixin button-emphasis {\n  &.primary,\n  &[primary],\n  &.is-primary {\n    --interactive-rgb: var(--color-dark-rgb);\n    background-color: var(--interactive-light);\n    color: var(--color-dark);\n  }\n\n  &.secondary,\n  &[secondary],\n  &.is-secondary {\n    background-color: var(--background-light);\n    border: 1px solid var(--interactive);\n  }\n}\n\n@mixin button-colors {\n  @each $color in \"danger\", \"success\", \"warning\", \"info\" {\n    &.#{$color},\n    &[#{$color}],\n    &.is-#{$color} {\n      background-color: var(--#{$color});\n      @if $color != \"warning\" {\n        --interactive-rgb: var(--color-dark-rgb);\n        color: var(--color-dark);\n      } @else {\n        --interactive-rgb: var(--color-light-rgb);\n        color: var(--color-light);\n      }\n    }\n  }\n}\n\n@mixin button-states {\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:not(:disabled) {\n    --focus-offset: var(--spacing-scale-half);\n    @include focus;\n    @include hover;\n    @include active;\n  }\n\n  &.active,\n  &.is-active,\n  &[active] {\n    --hover: var(--hover-dark);\n    background-color: var(--active);\n    color: var(--color-dark);\n  }\n\n  &.loading {\n    color: transparent !important;\n    cursor: progress;\n\n    &:not(:disabled) {\n      &:hover {\n        background-image: none;\n      }\n    }\n\n    &::before {\n      border-color: var(--interactive) var(--interactive) transparent;\n      border-style: solid;\n    }\n\n    &.primary,\n    &.danger,\n    &.success,\n    &.info {\n      &::before {\n        border-color: var(--background) var(--background) transparent;\n      }\n    }\n  }\n}\n\n@mixin button-dark {\n  &.inverted,\n  &.is-inverted,\n  &[inverted],\n  &.dark-mode {\n    @include dark-mode;\n    color: var(--interactive-dark);\n\n    &.primary,\n    &[primary],\n    &.is-primary {\n      --interactive-rgb: var(--background-dark-rgb);\n      background-color: var(--interactive-dark);\n      color: var(--background-dark);\n    }\n\n    &.secondary,\n    &[secondary],\n    &.is-secondary {\n      background-color: var(--background-dark);\n    }\n\n    &.active {\n      --hover: var(--hover-light);\n      --interactive-rgb: var(--active-rgb);\n      background-color: var(--background-light);\n      color: var(--active);\n    }\n  }\n}\n\n@mixin button-dark-mode {\n  .#{$prefix}button {\n    &.primary,\n    &[primary],\n    &.is-primary {\n      @include light-mode($interactive-rgb: \"background-dark-rgb\");\n      background-color: var(--interactive-dark);\n      color: var(--background-dark);\n    }\n\n    &.secondary,\n    &[secondary],\n    &.is-secondary {\n      background-color: var(--background-dark);\n    }\n  }\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}