@govbr-ds/core/dist/components/step/step.css.map

Padrão Digital de Governo

{"version":3,"file":"components/step/step.css","mappings":"AAAA,gBAAgB;AAKhB;ECWE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;ADhBF;ACkBE;EACE;EACA;ADhBJ;ACmBE;EACE;ADjBJ;ACmBI;EACE;ADjBN;ACuBE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADrBJ;ACyBI;EACE;ADvBN;AC4BI;EACE;AD1BN;AC+BI;EACE;AD7BN;ACiCM;EACE;AD/BR;ACoCM;EACE;ADlCR;AC2CI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADzCN;AC6CE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AD3CJ;AC8CE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AD5CJ;AC8CI;EACE;EACA;EACA;EACA;AD5CN;ACkDM;EACE;ADhDR;ACoDI;EACE;ADlDN;ACqDI;EACE;ADnDN;ACyDM;EACE;ADvDR;AC2DI;EACE;ADzDN;AC4DI;EACE;AD1DN;ACgEM;EACE;EACA;AD9DR;ACkEI;EACE;ADhEN;ACsEM;EACE;EACA;ADpER;ACwEI;EACE;ADtEN;AC4EM;EACE;EACA;EACA;EACA;AD1ER;ACgFQ;EACE;AD9EV;ACqFQ;EACE;ADnFV;AC6FI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AD3FN;AC+FM;EACE;AD7FR;ACkGM;EACE;ADhGR;ACuGM;EACE;ADrGR;AC4GM;EACE;AD1GR;ACiHM;EACE;AD/GR;ACmHQ;EACE;ADjHV;ACsHQ;EACE;ADpHV;AC4HM;EACE;AD1HR;AC8HQ;EACE;AD5HV;ACiIQ;EACE;AD/HV;ACuIM;EACE;EACA;EACA;EACA;EACA;EACA;ADrIR;ACyIQ;EACE;EACA;ADvIV;AC4IQ;EACE;EACA;AD1IV;ACiJQ;EACE;AD/IV;ACsJQ;EACE;ADpJV;AC6JE;EACE;EACA;EACA;EACA;AD3JJ;AC+JI;EACE;EACA;AD7JN;ACkKI;EACE;EACA;ADhKN;ACqKI;EACE;ADnKN;AEjNE;EDuXI;IACE;IACA;IACA;IACA;IACA;IACA;EDnKN;AACF;ACwKI;EACE;ADtKN;AE9NE;EDuYI;IACE;IACA;IACA;IACA;IACA;IACA;EDtKN;AACF;AC6KM;EACE;EACA;EACA;EACA;AD3KR;ACgLM;EACE;EACA;EACA;EACA;AD9KR;ACwLM;EACE;EACA;EACA;ADtLR;AC0LI;EACE;EACA;EACA;EACA;ADxLN;AC+LE;EACE;EACA;EACA;AD7LJ;AC+LI;EACE;EACA;EACA;AD7LN;ACgMI;EACE;EACA;AD9LN;ACgMM;EACE;EACA;EACA;EACA;EACA;AD9LR;ACiMM;EACE;AD/LR;ACmMI;EACE;EACA;EACA;EACA;ADjMN;ACwME;EACE;EACA;EACA;ADtMJ;ACwMI;EACE;EACA;EACA;ADtMN;ACyMI;EACE;EACA;EACA;EACA;EACA;ADvMN;ACyMM;EACE;EACA;EACA;EACA;EACA;EACA;ADvMR;AC0MM;EACE;ADxMR;AC4MI;EACE;EACA;EACA;EACA;AD1MN;ACgNE;EAEE;EACA;AD/MJ;AGhVE;EACE;EACA;AHkVJ;AG/UE;EACE;AHiVJ;AG9UE;EACE;AHgVJ;AG5UI;EACE;AH8UN;ACqMI;EACE;ADnMN;ACsMI;EACE;EACA;ADpMN;ACsMM;EACE;EACA;ADpMR;AC8MM;EAII;AD/MV;ACkNQ;EAII;ADnNZ;ACuNQ;EACE;ADrNV;ACuNU;EACE;ADrNZ;ACkMM;EAII;ADnMV;ACsMQ;EAII;ADvMZ;AC2MQ;EACE;ADzMV;AC2MU;EACE;ADzMZ;ACsLM;EAEI;ADrLV;AC0LQ;EAEI;ADzLZ;AC+LQ;EACE;AD7LV;AC+LU;EACE;EAEE;AD9Ld;ACyKM;EAII;AD1KV;AC6KQ;EAII;AD9KZ;ACkLQ;EACE;ADhLV;ACkLU;EACE;ADhLZ;AC2LM;EACE;EACA;EACA;ADzLR;AC4LM;EACE;AD1LR;AC8LI;EACE;AD5LN;ACiMM;EACE;EACA;EACA;EACA;EACA;AD/LR;ACoMM;EACE;ADlMR;ACyMI;EACE;ADvMN;ACyMM;EACE;ADvMR;AC0MM;EACE;ADxMR;ACkNQ;EACE;EACA;EACA;ADhNV;ACuNU;EACE;ADrNZ;ACwNU;EACE;EACA;EACA;EACA;EACA;ADtNZ;AC8NI;EACE;AD5NN;AC8NM;EAEE;EACA;EACA;AD7NR;AC+NQ;EACE;EACA;EACA;EACA;AD7NV;ACoOQ;EACE;ADlOV;ACuOQ;EACE;ADrOV;AC4SE;EGhvBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AJucF;ACsOM;EAEI;ADrOV;ACwOQ;EAEI;ADvOZ;AC4OU;EACE;AD1OZ;AC6NM;EAEI;AD5NV;AC+NQ;EAEI;AD9NZ;ACmOU;EACE;ADjOZ;ACgOU;EACE;AD9NZ;ACiNM;EAEI;ADhNV;ACmNQ;EAEI;ADlNZ;ACuNU;EACE;ADrNZ;AC2NI;EAEE;AD1NN;AC4NM;EACE;EACA;EACA;AD1NR;AC6NM;EACE;AD3NR;ACqOQ;EACE;ADnOV;AC2OM;EACE;EACA;ADzOR,C","sources":["webpack://core/./src/components/step/_step.scss","webpack://core/./src/components/step/_mixins.scss","webpack://core/./src/partial/scss/mixins/_grid.scss","webpack://core/./src/partial/scss/mixins/_scrollbar.scss","webpack://core/./src/partial/scss/mixins/_states.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}step {\n  @include step-configs;\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","// 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","// 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"],"names":[],"ignoreList":[],"sourceRoot":""}