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

Padrão Digital de Governo

{"version":3,"file":"components/carousel/carousel.min.css","mappings":"AAKA,gBAWA,CAXA,aCaE,qDAAsD,CACtD,iDAAkD,CAClD,2BAA4B,CAC5B,wCAAyC,CACzC,yBAA0B,CAC1B,2BAA4B,CAC5B,iCAAkC,CAClC,iCAAkC,CAGlC,+CAAgD,CAIhD,YAAa,CACb,gCAAiC,CACjC,qCAAsC,CACtC,iBAAkB,CAClB,+BDpBF,CC+FE,6BACE,aAAc,CACd,gBAAiB,CACjB,kCAAmC,CACnC,eAAgB,CAChB,iBAAkB,CAClB,gCAAiC,CACjC,SD7FJ,CC+FI,4CACE,kBAAmB,CACnB,YAAa,CACb,cAAe,CAEf,sBAAuB,CACvB,8BAA+B,CAC/B,sCACA,SAAU,CACV,eAAgB,CAChB,iBAAkB,CAClB,KAAM,CAKN,iBAAkB,CAClB,+BD7FN,CC+FM,gGAfA,gCAAiC,CAQjC,mBAAoB,CACpB,uBAAyB,CACzB,uBAAwB,CACxB,sCDjFN,CCqFM,oDAEE,gBAAkB,CAClB,SAAU,CAKV,kBD7FR,CCgGM,8DACE,kBAAmB,CACnB,YAAa,CACb,cAAe,CACf,gCAAiC,CACjC,sBAAuB,CACvB,+BD9FR,CCgGQ,8EACE,iBD9FV,CCcE,4BACE,UAAW,CACX,kCAAmC,CACnC,iBAAkB,CAClB,+BDZJ,CCcI,0IAEE,mDAAoD,CACpD,mDDZN,CCcM,gLACE,KDXR,CCaQ,0OACE,qBDVV,CCeI,uFACE,cAAe,CACf,QDbN,CCeM,4GACE,mCDbR,CCnDE,8BACE,kBAAmB,CACnB,YAAa,CACb,gCAAiC,CACjC,UAAW,CACX,iBAAkB,CAClB,OAAQ,CACR,iBAAkB,CAClB,SDqDJ,CCnDI,0CACE,MAAO,CACP,WDqDN,CClDI,kGAEE,oCAAqC,CACrC,SDoDN,CClDM,8GACE,yCDqDR,CCsDI,6CACE,gCDpDN,CCsDM,gIAEE,eAAgB,CAChB,gCAAiC,CACjC,QAAS,CACT,sCDpDR,CCwDI,4CACE,gCAAiC,CACjC,MAAO,CACP,+BDtDN,CCgEI,sJAHE,0EDrDN,CCwDI,0EAEE,SAAU,CACV,wED3DN,CCgEI,+CACE,gCD9DN,CCiEI,8CACE,gCAAiC,CACjC,SAAU,CACV,wED/DN,CCoEI,+CACE,0EDlEN,CCoEM,oIAEE,eAAgB,CAChB,gCAAiC,CACjC,QAAS,CACT,sCDlER,CCsEI,8CACE,2EACA,MAAO,CACP,+BDpEN,CElIE,yBFzBF,aCsOI,mCAAoC,CACpC,+BDvEF,CCyEE,8BACE,0EDvEJ,CCyEI,kGAEE,eAAgB,CAChB,YAAa,CACb,gCAAiC,CACjC,QAAS,CACT,sCDvEN,CC6EM,oIAEE,YD3ER,CCgFE,6BACE,2EACA,MAAO,CACP,+BD9EJ,CCiFE,0IAEE,uBD/EJ,CACF,CCuFI,4GE9PF,0BACA,kCACA,+BACA,sCACA,8CACA,8BACA,0BACA,8BACA,sCACA,+BHsLF,CI4fQ,gTAEI,gCJxfZ,CI6fU,iLACE,sCJ3fZ,CImfQ,oSAEI,6BJ/eZ,CIofU,2KACE,mCJlfZ,CIifU,iLACE,sCJ/eZ,CIueQ,4SAEI,+BJneZ,CIweU,+KACE,qCJteZ,CI4eI,wOAEE,uBJ3eN,CI6eM,oQACE,wCAAyC,CACzC,oCAAqC,CACrC,mBJ3eR,CI8eM,oRACE,mBJ5eR,CIsfQ,wVACE,8BJpfV,CI4fM,mJACE,4BAA6B,CAC7B,kBJ1fR,CClME,6IAGE,0BAA2B,CAC3B,kCAAmC,CACnC,gCAAiC,CACjC,gCDoMJ","sources":["webpack://core/./src/components/carousel/_carousel.scss","webpack://core/./src/components/carousel/_mixins.scss","webpack://core/./src/partial/scss/mixins/_grid.scss","webpack://core/./src/partial/scss/mixins/_states.scss","webpack://core/./src/components/step/_mixins.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}carousel {\n  @include carousel-configs;\n}\n","// Dependências\n@import \"../step/mixins\";\n\n// Mixins\n@mixin carousel-configs {\n  @include carousel-tokens;\n  @include carousel-default;\n  @include carousel-stage;\n  @include carousel-step;\n  @include carousel-button;\n  @include carousel-types;\n  @include carousel-mobile;\n  @include carousel-dark-mode;\n  @include carousel-states;\n}\n\n@mixin carousel-tokens {\n  //Sizes\n  --carousel-button-margin: var(--spacing-scale-default);\n  --carousel-buton-icon-size: var(--–icon-size-base);\n  --carousel-step-height: 40px;\n  --carousel-step-progress-min-height: 32px;\n  --carousel-full-size: 100%;\n  --carousel-min-height: 400px;\n  --carousel-button-fix-height: 52px;\n  --carousel-button-fix-width: 100px;\n\n  //Colors\n  --carousel-step-progress-background: transparent;\n}\n\n@mixin carousel-default {\n  display: flex;\n  height: var(--carousel-full-size);\n  min-height: var(--carousel-min-height);\n  position: relative;\n  width: var(--carousel-full-size);\n}\n\n@mixin carousel-button {\n  .carousel-button {\n    align-items: center;\n    display: flex;\n    height: var(--carousel-full-size);\n    left: unset;\n    position: absolute;\n    right: 0;\n    width: fit-content;\n    z-index: 1;\n\n    &:first-child {\n      left: 0;\n      right: unset;\n    }\n\n    .carousel-btn-next,\n    .carousel-btn-prev {\n      margin: var(--carousel-button-margin);\n      padding: 0;\n\n      i.fas {\n        font-size: var(--carousel-buton-icon-size);\n      }\n    }\n  }\n}\n\n@mixin carousel-states {\n  .carousel-page[active]:focus,\n  .carousel-page[active]:focus-visible,\n  .carousel-page[active]:focus-within {\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@mixin carousel-step {\n  .carousel-step {\n    bottom: 8px;\n    height: var(--carousel-step-height);\n    position: absolute;\n    width: var(--carousel-full-size);\n\n    .br-step[data-type=\"simple\"] .step-progress,\n    .br-step[data-type=\"text\"] .step-progress {\n      background: var(--carousel-step-progress-background);\n      min-height: var(--carousel-step-progress-min-height);\n\n      .step-progress-btn {\n        top: 0;\n\n        &:hover:not([disabled])::before {\n          background-image: none;\n        }\n      }\n    }\n\n    .br-step[data-type=\"text\"] .step-progress .step-progress-btn {\n      cursor: default;\n      margin: 0;\n\n      &.focus-visible::before {\n        outline-color: transparent !important;\n      }\n    }\n  }\n}\n\n@mixin carousel-stage {\n  .carousel-stage {\n    display: block;\n    flex-wrap: nowrap;\n    height: var(--carousel-step-height);\n    overflow: hidden;\n    position: relative;\n    width: var(--carousel-full-width);\n    z-index: 0;\n\n    .carousel-page {\n      align-items: center;\n      display: flex;\n      flex-wrap: wrap;\n      height: var(--carousel-full-size);\n      justify-content: center;\n      left: var(--carousel-full-size);\n      margin-bottom: v(spacing-scale-4x);\n      opacity: 0;\n      overflow: hidden;\n      position: absolute;\n      top: 0;\n      transition-delay: 0s;\n      transition-duration: 0.5s;\n      transition-property: all;\n      transition-timing-function: ease-in-out;\n      visibility: hidden;\n      width: var(--carousel-full-size);\n\n      &[active] {\n        height: var(--carousel-full-size);\n        left: 0 !important;\n        opacity: 1;\n        transition-delay: 0s;\n        transition-duration: 0.5s;\n        transition-property: all;\n        transition-timing-function: ease-in-out;\n        visibility: visible;\n      }\n\n      .carousel-content {\n        align-items: center;\n        display: flex;\n        flex-wrap: wrap;\n        height: var(--carousel-full-size);\n        justify-content: center;\n        width: var(--carousel-full-size);\n\n        .carousel-title {\n          position: absolute;\n        }\n      }\n    }\n  }\n}\n\n@mixin carousel-types {\n  &[data-stage=\"in\"] {\n    .carousel-button {\n      height: var(--carousel-full-size);\n\n      .carousel-btn-next,\n      .carousel-btn-prev {\n        border-radius: 0;\n        height: var(--carousel-full-size);\n        margin: 0;\n        padding: 0 var(--spacing-scale-default);\n      }\n    }\n\n    .carousel-stage {\n      height: var(--carousel-full-size);\n      left: 0;\n      width: var(--carousel-full-size);\n    }\n  }\n\n  &[data-stage=\"out\"],\n  & {\n    .carousel-button {\n      height: calc(#{var(--carousel-full-size)} - #{var(--carousel-button-fix-height)});\n    }\n\n    .carousel-stage {\n      height: calc(#{var(--carousel-full-size)} - #{var(--carousel-button-fix-height)});\n      left: 50px;\n      width: calc(#{var(--carousel-full-size)} - #{var(--carousel-button-fix-width)});\n    }\n  }\n\n  &[data-stage=\"hibh\"] {\n    .carousel-button {\n      height: var(--carousel-full-size);\n    }\n\n    .carousel-stage {\n      height: var(--carousel-full-size);\n      left: 50px;\n      width: calc(#{var(--carousel-full-size)} - #{var(--carousel-button-fix-width)});\n    }\n  }\n\n  &[data-stage=\"hibw\"] {\n    .carousel-button {\n      height: calc(#{var(--carousel-full-size)} - #{var(--carousel-button-fix-height)});\n\n      .carousel-btn-next,\n      .carousel-btn-prev {\n        border-radius: 0;\n        height: var(--carousel-full-size);\n        margin: 0;\n        padding: 0 var(--spacing-scale-default);\n      }\n    }\n\n    .carousel-stage {\n      height: calc(#{var(--carousel-full-size)} - #{var(--carousel-button-fix-height)});\n      left: 0;\n      width: var(--carousel-full-size);\n    }\n  }\n}\n\n@mixin carousel-mobile {\n  @include media-breakpoint-down(sm) {\n    max-width: var(--carousel-full-size);\n    width: var(--carousel-full-size);\n\n    .carousel-button {\n      height: calc(#{var(--carousel-full-size)} - #{var(--carousel-button-fix-height)});\n\n      .carousel-btn-next,\n      .carousel-btn-prev {\n        border-radius: 0;\n        display: none;\n        height: var(--carousel-full-size);\n        margin: 0;\n        padding: 0 var(--spacing-scale-default);\n      }\n    }\n\n    &[data-mobile-nav] {\n      .carousel-button {\n        .carousel-btn-next,\n        .carousel-btn-prev {\n          display: flex;\n        }\n      }\n    }\n\n    .carousel-stage {\n      height: calc(#{var(--carousel-full-size)} - #{var(--carousel-button-fix-height)});\n      left: 0;\n      width: var(--carousel-full-size);\n    }\n\n    .carousel-step .br-step[data-type=\"simple\"] .step-progress,\n    .carousel-step .br-step[data-type=\"text\"] .step-progress {\n      padding-top: 0 !important;\n    }\n  }\n}\n\n@mixin carousel-dark-mode {\n  &.inverted,\n  &.dark-mode {\n    @include dark-mode;\n    .#{$prefix}step {\n      @include step-dark-mode;\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","// 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 step-configs {\n  @include step-tokens;\n  @include step-default;\n  @include step-button;\n  @include step-indicator;\n  @include step-lines;\n  @include step-label;\n  @include step-empty;\n  @include step-simple;\n  @include step-text;\n  @include step-scroll;\n  @include step-states;\n  @include step-dark;\n}\n\n@mixin step-tokens {\n  --step-empty: 16px;\n  --step-empty-border: 4px;\n  --step-line: 1px;\n  --step-size: var(--step-medium);\n  --step-small: 32px;\n  --step-medium: 40px;\n  --step-large: 48px;\n  --step-simple-size: var(--step-simple-medium);\n  --step-simple-medium: 8px;\n  --step-simple-large: 12px;\n  --step-alert-success-icon: \"\\f00c\";\n  --step-alert-warning-icon: \"\\f071\";\n  --step-alert-info-icon: \"\\f12a\";\n  --step-alert-danger-icon: \"\\f00d\";\n}\n\n@mixin step-default {\n  display: flex;\n  padding: var(--spacing-scale-base);\n\n  .step-progress {\n    display: flex;\n    flex-grow: 1;\n  }\n  // Step vertical\n  &.vertical {\n    flex-direction: column;\n\n    .step-progress {\n      flex-direction: column;\n    }\n  }\n}\n\n@mixin step-button {\n  .step-progress-btn {\n    align-items: center;\n    background-color: transparent;\n    border: 0;\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    min-height: var(--step-size);\n    padding: 0;\n    position: relative;\n  }\n\n  &[data-label=\"left\"] {\n    .step-progress-btn {\n      justify-content: end;\n    }\n  }\n\n  &[data-label=\"right\"] {\n    .step-progress-btn {\n      justify-content: start;\n    }\n  }\n  // Vertical\n  &.vertical {\n    .step-progress-btn {\n      justify-content: start;\n    }\n\n    &[data-label=\"left\"] {\n      .step-progress-btn {\n        justify-content: end;\n      }\n    }\n\n    &[data-label=\"right\"] {\n      .step-progress-btn {\n        justify-content: start;\n      }\n    }\n  }\n}\n\n@mixin step-indicator {\n  // Indicador numérico\n  .step-progress-btn {\n    &::before {\n      align-items: center;\n      background-color: var(--background);\n      border: var(--step-line) solid var(--interactive);\n      border-radius: 50%;\n      color: var(--interactive);\n      content: attr(step-num);\n      display: inline-flex;\n      font-size: var(--font-size-scale-up-03);\n      font-weight: var(--font-weight-medium);\n      height: var(--step-size);\n      justify-content: center;\n      left: 0;\n      margin: auto;\n      position: absolute;\n      right: 0;\n      width: var(--step-size);\n      z-index: 2;\n    }\n  }\n  // Indicador icônico\n  .step-icon {\n    align-items: center;\n    color: var(--interactive);\n    display: inline-flex;\n    height: var(--step-size);\n    justify-content: center;\n    position: absolute;\n    width: var(--step-size);\n    z-index: 4;\n  }\n  // Ícone de alerta\n  .step-alert {\n    align-items: center;\n    border-radius: 50%;\n    color: var(--color-dark);\n    display: flex;\n    height: var(--font-size-scale-up-04);\n    justify-content: center;\n    position: absolute;\n    width: var(--font-size-scale-up-04);\n    z-index: 4;\n\n    &::after {\n      display: flex;\n      font-family: \"Font Awesome 5 Free\";\n      font-size: var(--font-size-scale-up-01);\n      font-weight: 900;\n    }\n  }\n  // Indicador acima\n  &[data-label=\"bottom\"] {\n    .step-progress-btn {\n      &::before {\n        top: 0;\n      }\n    }\n\n    .step-icon {\n      top: 0;\n    }\n\n    .step-alert {\n      transform: translate(calc(var(--step-size) * 0.5), calc(var(--step-size) * -0.75));\n    }\n  }\n  // Indicador abaixo\n  &[data-label=\"top\"] {\n    .step-progress-btn {\n      &::before {\n        bottom: 0;\n      }\n    }\n\n    .step-icon {\n      bottom: 0;\n    }\n\n    .step-alert {\n      transform: translate(calc(var(--step-size) * 0.5), calc(var(--step-size) * 0.25));\n    }\n  }\n  // Indicador esquerda\n  &[data-label=\"left\"] {\n    .step-progress-btn {\n      &::before {\n        left: auto;\n        right: 0;\n      }\n    }\n\n    .step-alert {\n      transform: translate(calc(var(--step-size) * 0.4), calc(var(--step-size) * -0.25));\n    }\n  }\n  // Indicador direita\n  &[data-label=\"right\"] {\n    .step-progress-btn {\n      &::before {\n        left: 0;\n        right: auto;\n      }\n    }\n\n    .step-alert {\n      transform: translate(calc(var(--step-size) * 0.65), calc(var(--step-size) * -0.25));\n    }\n  }\n  // Indicador vertical\n  &.vertical {\n    .step-progress-btn {\n      &::before {\n        bottom: 0;\n        left: auto;\n        right: auto;\n        top: 0;\n      }\n    }\n    // Indicador esquerda\n    &[data-label=\"left\"] {\n      .step-progress-btn {\n        &::before {\n          right: 0;\n        }\n      }\n    }\n    // Indicador direita\n    &[data-label=\"right\"] {\n      .step-progress-btn {\n        &::before {\n          left: 0;\n        }\n      }\n    }\n  }\n}\n\n@mixin step-lines {\n  // Linha do tempo\n  .step-progress-btn {\n    &::after {\n      background-color: var(--interactive);\n      content: \"\";\n      display: block;\n      height: var(--step-line);\n      left: 0;\n      position: absolute;\n      right: 0;\n      z-index: 1;\n    }\n\n    &:first-child {\n      &::after {\n        left: 50%;\n      }\n    }\n\n    &:last-child {\n      &::after {\n        right: 50%;\n      }\n    }\n  }\n  // Linha do tempo acima\n  &[data-label=\"bottom\"] {\n    .step-progress-btn {\n      &::after {\n        top: calc(var(--step-size) * 0.5);\n      }\n    }\n  }\n  // Linha do tempo abaixo\n  &[data-label=\"top\"] {\n    .step-progress-btn {\n      &::after {\n        bottom: calc(var(--step-size) * 0.5);\n      }\n    }\n  }\n  // Linha do tempo esquerda\n  &[data-label=\"left\"] {\n    .step-progress-btn {\n      &::after {\n        left: 0;\n      }\n\n      &:first-child {\n        &::after {\n          left: 100%;\n        }\n      }\n\n      &:last-child {\n        &::after {\n          right: 0;\n        }\n      }\n    }\n  }\n  // Linha do tempo direita\n  &[data-label=\"right\"] {\n    .step-progress-btn {\n      &::after {\n        right: 0;\n      }\n\n      &:first-child {\n        &::after {\n          left: 0;\n        }\n      }\n\n      &:last-child {\n        &::after {\n          right: 100%;\n        }\n      }\n    }\n  }\n  // Linha do tempo vertical\n  &.vertical {\n    .step-progress-btn {\n      &::after {\n        bottom: 0;\n        height: auto;\n        left: auto;\n        right: auto;\n        top: 0;\n        width: var(--step-line);\n      }\n\n      &:first-child {\n        &::after {\n          left: auto;\n          top: 50%;\n        }\n      }\n\n      &:last-child {\n        &::after {\n          bottom: 50%;\n          right: auto;\n        }\n      }\n    }\n    // Linha do tempo esquerda\n    &[data-label=\"left\"] {\n      .step-progress-btn {\n        &::after {\n          right: calc(var(--step-size) * 0.5);\n        }\n      }\n    }\n    // Linha do tempo direita\n    &[data-label=\"right\"] {\n      .step-progress-btn {\n        &::after {\n          left: calc(var(--step-size) * 0.5);\n        }\n      }\n    }\n  }\n}\n\n@mixin step-label {\n  // Rótulo\n  .step-info {\n    color: var(--interactive);\n    display: inline-block;\n    font-size: var(--font-size-scale-up-01);\n    font-weight: var(--font-weight-medium);\n  }\n  // Rótulo acima\n  &[data-label=\"bottom\"] {\n    .step-info {\n      margin-top: var(--step-size);\n      padding-top: var(--spacing-scale-2x);\n    }\n  }\n  // Rótulo abaixo\n  &[data-label=\"top\"] {\n    .step-info {\n      margin-bottom: var(--step-size);\n      padding-bottom: var(--spacing-scale-2x);\n    }\n  }\n  // Rótulo esquerda\n  &[data-label=\"left\"] {\n    .step-info {\n      display: none;\n    }\n    @include media-breakpoint-up(sm) {\n      .step-info {\n        background-color: var(--background);\n        display: inline-block;\n        margin-right: var(--step-size);\n        padding: var(--spacing-scale-2x);\n        position: relative;\n        z-index: 3;\n      }\n    }\n  }\n  // Rótulo direita\n  &[data-label=\"right\"] {\n    .step-info {\n      display: none;\n    }\n    @include media-breakpoint-up(sm) {\n      .step-info {\n        background-color: var(--background);\n        display: inline-block;\n        margin-left: var(--step-size);\n        padding: var(--spacing-scale-2x);\n        position: relative;\n        z-index: 3;\n      }\n    }\n  }\n  // Rótulo vertical\n  &.vertical {\n    // Rótulo esquerda\n    &[data-label=\"left\"] {\n      .step-info {\n        display: inline-block;\n        margin-left: 0;\n        margin-right: var(--step-size);\n        padding: var(--spacing-scale-2x);\n      }\n    }\n    // Rótulo direita\n    &[data-label=\"right\"] {\n      .step-info {\n        display: inline-block;\n        margin-left: var(--step-size);\n        margin-right: 0;\n        padding: var(--spacing-scale-2x);\n      }\n    }\n  }\n}\n\n@mixin step-empty {\n  // Step vazio\n  &[data-type=\"void\"] {\n    .step-progress-btn {\n      &::before {\n        content: \"\";\n        height: var(--step-empty);\n        width: var(--step-empty);\n      }\n    }\n\n    .step-info {\n      height: 0;\n      overflow: hidden;\n      position: absolute;\n      width: 0;\n    }\n  }\n}\n\n@mixin step-simple {\n  // Step simples\n  &[data-type=\"simple\"] {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n\n    .step-progress {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n    }\n\n    .step-progress-btn {\n      flex-grow: 0;\n      width: 24px;\n\n      &::before {\n        background-color: var(--gray-20);\n        border-color: var(--gray-20);\n        content: \"\";\n        height: var(--step-simple-size);\n        width: var(--step-simple-size);\n      }\n\n      &::after {\n        content: none;\n      }\n    }\n\n    .step-info {\n      height: 0;\n      overflow: hidden;\n      position: absolute;\n      width: 0;\n    }\n  }\n}\n\n@mixin step-text {\n  // Step textual\n  &[data-type=\"text\"] {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n\n    .step-progress {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n    }\n\n    .step-progress-btn {\n      height: 0;\n      min-height: var(--font-size-scale-base);\n      overflow: hidden;\n      position: absolute;\n      width: 0;\n\n      &::before {\n        background-color: transparent;\n        border: 0;\n        color: var(--color);\n        font-size: var(--font-size-scale-base);\n        font-weight: var(--font-weight-regular);\n        width: auto;\n      }\n\n      &::after {\n        content: none;\n      }\n    }\n\n    .step-info {\n      height: 0;\n      overflow: hidden;\n      position: absolute;\n      width: 0;\n    }\n  }\n}\n\n@mixin step-scroll {\n  &[scroll],\n  &[data-scroll] {\n    overflow-x: auto;\n    overflow-y: hidden;\n    @include scrollbar;\n\n    .step-progress-btn {\n      min-width: 200px;\n    }\n\n    &.vertical {\n      overflow-x: hidden;\n      overflow-y: auto;\n\n      .step-progress-btn {\n        min-height: 100px;\n        min-width: auto;\n      }\n    }\n  }\n}\n\n@mixin step-states {\n  .step-progress-btn {\n    // Concluído, Info, Alerta, Erro\n    @each $state in \"success\", \"info\", \"warning\", \"danger\" {\n      &[data-alert=\"#{$state}\"] {\n        @if $state == \"warning\" {\n          color: var(--color-light);\n        } @else {\n          color: var(--#{$state});\n        }\n\n        .step-info {\n          @if $state == \"warning\" {\n            color: var(--color);\n          } @else {\n            color: var(--#{$state});\n          }\n        }\n\n        .step-alert {\n          background-color: var(--#{$state});\n\n          &::after {\n            content: var(--step-alert-#{$state}-icon);\n            @if $state == \"warning\" {\n              color: var(--color-light);\n            }\n          }\n        }\n      }\n    }\n    // Ativo\n    &.active,\n    &[active] {\n      &::before {\n        background-color: var(--active);\n        border-color: var(--active);\n        color: var(--background);\n      }\n\n      .step-icon {\n        color: var(--background);\n      }\n    }\n    // Focus\n    &:focus {\n      outline: none;\n    }\n\n    &.focus-visible,\n    &:focus-visible {\n      &::before {\n        outline-color: var(--focus);\n        outline-offset: var(--focus-offset);\n        outline-style: var(--focus-style);\n        outline-width: var(--focus-width);\n        z-index: 4;\n      }\n    }\n    // Hover\n    &:hover:not(:disabled) {\n      &::before {\n        background-image: linear-gradient(\n          rgba(var(--interactive-rgb), var(--hover)),\n          rgba(var(--interactive-rgb), var(--hover))\n        );\n      }\n    }\n\n    &:disabled {\n      opacity: 1;\n\n      &::before {\n        border-color: rgba(var(--interactive-rgb), var(--disabled));\n      }\n\n      .step-icon {\n        color: rgba(var(--interactive-rgb), var(--disabled));\n      }\n    }\n  }\n  // Step vazio\n  &[data-type=\"void\"] {\n    .step-progress-btn {\n      // Ativo\n      &.active,\n      &[active] {\n        .step-alert {\n          border: var(--step-empty-border) solid var(--active);\n          height: calc(var(--font-size-scale-up-04) + var(--step-empty-border));\n          width: calc(var(--font-size-scale-up-04) + var(--step-empty-border));\n        }\n      }\n      // Focus\n      &[data-alert] {\n        &.focus-visible,\n        &:focus-visible {\n          &::before {\n            outline: none;\n          }\n\n          .step-alert {\n            outline-color: var(--focus);\n            outline-offset: var(--focus-offset);\n            outline-style: var(--focus-style);\n            outline-width: var(--focus-width);\n            z-index: 4;\n          }\n        }\n      }\n    }\n  }\n  // Step textual\n  &[data-type=\"text\"] {\n    .step-progress-btn {\n      cursor: default;\n\n      &.active,\n      &[active] {\n        height: auto;\n        position: static;\n        width: auto;\n\n        &::before {\n          background-color: transparent;\n          border: 0;\n          color: var(--color);\n          position: static;\n        }\n      }\n\n      &:focus,\n      &.focus-visible,\n      &:focus-visible {\n        &::before {\n          outline: none;\n        }\n      }\n\n      &:hover {\n        &::before {\n          background-image: none;\n        }\n      }\n    }\n  }\n}\n\n@mixin step-dark-mode {\n  @include dark-mode;\n\n  .step-progress-btn {\n    // Concluído, Info, Alerta, Erro\n    @each $state in \"success\", \"info\", \"warning\", \"danger\" {\n      &[data-alert=\"#{$state}\"] {\n        @if $state != \"warning\" {\n          color: var(--#{$state}-alternative);\n        }\n\n        .step-info {\n          @if $state != \"warning\" {\n            color: var(--#{$state}-alternative);\n          }\n        }\n\n        .step-alert {\n          &::after {\n            content: var(--step-alert-#{$state}-icon);\n          }\n        }\n      }\n    }\n    // Ativo\n    &.active,\n    &[active] {\n      color: var(--color-dark);\n\n      &::before {\n        background-color: var(--background-light);\n        border-color: var(--background-light);\n        color: var(--active);\n      }\n\n      .step-icon {\n        color: var(--active);\n      }\n    }\n  }\n\n  &[data-type=\"void\"] {\n    .step-progress-btn {\n      // Ativo\n      &.active,\n      &[active] {\n        .step-alert {\n          border-color: var(--color-dark);\n        }\n      }\n    }\n  }\n\n  &[data-type=\"text\"] {\n    .step-progress-btn {\n      &::before {\n        background-color: transparent;\n        color: var(--color);\n      }\n    }\n  }\n}\n\n@mixin step-dark {\n  &.inverted,\n  &.dark-mode {\n    @include step-dark-mode;\n  }\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}