{"version":3,"sources":["webpack:///./src/pages/onboarding/_onboarding.scss","webpack:///./node_modules/bootstrap/scss/mixins/_breakpoints.scss","webpack:///./src/partial/scss/mixins/_button.scss","webpack:///./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AA+JA;EAlJE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EA+FA;EACA;AA5GF;AC4CI;EDmGJ;IAjII;EAVF;AACF;AAqEQ;EACE;EACA;EACA;EACA;AAnEV;AAoEU;EACE;EACA;EACA;AAlEZ;AA4EI;EACE;EACA;EACA;AA1EN;AA6EE;EACE;EACA;EACA;EACA;AA3EJ;AARE;EACE;EACA;EACA;EACA;EACA;AAUJ;AARE;EACE;EACA;EEhCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AFwCF;AEtCE;EACE;AFwCJ;AGzDE;EACE;AH2DJ;AGxDE;EAEE;EACA;EACA;EACA;AHyDJ;AGnFI;EACE;AHqFN;AGhFI;EACE;AHkFN;AApDM;EACE;AAsDR;AAlDE;;EAEE;EACA;EACA;EACA;EACA;AAoDJ;AAlDE;EACE;AAoDJ;AAlDE;EACE;AAoDJ;AAlDE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAoDJ;AAlDE;EG/EA;EACA;AHoIF;AGlIE;EACE;AHoIJ;AAZI;EACE;AAcN;AAZI;EACE;AAcN;AAZI;EAGE;AAYN;AAVI;EACE;AAYN;AANE;EACE;EACA;AAQJ;AAPI;EACE;EACA;EACA;AASN;AAPI;EACE;EACA;AASN,C","file":"pages/onboarding/onboarding.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n@mixin onboarding {\n  @include onboarding-tokens;\n  @include onboarding-base;\n  @include onboarding-bullets;\n  @include onboarding-skip;\n  @include onboarding-buttons;\n  @include onboarding-tooltip;\n  @include onboarding-floating;\n}\n\n@mixin onboarding-tokens {\n  --onboarding-background: var(--bg-color);\n  --onboarding-color: var(--color);\n  --onboarding-padding: var(--spacing-scale-2x);\n  --onboarding-title: var(--font-size-scale-up-01);\n  --onboarding-font-size: var(--font-size-scale-base);\n  --onboarding-font-weight: var(--font-weight-semi-bold);\n  --onboarding-width: var(--onboarding-width-mobile);\n  --onboarding-width-mobile: 90vw;\n  --onboarding-width-tablet: 400px;\n  --onboarding-tooltip-background: var(--color-warning);\n  --onboarding-tooltip-color: inhrerit;\n}\n\n@mixin onboarding-base {\n  width: var(--onboarding-width);\n  max-width: var(--onboarding-width-tablet);\n  @include media-breakpoint-up(sm) {\n    --onboarding-width: var(--onboarding-width-tablet);\n  }\n}\n\n@mixin onboarding-buttons {\n  .introjs-tooltipbuttons {\n    border: 0;\n    position: relative;\n    text-align: center;\n    margin: 0 var(--onboarding-padding);\n    padding: 0;\n  }\n  .introjs-button {\n    --pressed: 0;\n    --button-size: var(--button-medium);\n    @include button-tokens;\n    @include button-base;\n    &:not(.introjs-disabled) {\n      @include focus;\n      @include hover;\n      &:focus {\n        box-shadow: none;\n      }\n    }\n  }\n  .introjs-nextbutton,\n  .introjs-prevbutton {\n    --button-radius: 50%;\n    --button-padding: 0;\n    position: absolute;\n    top: calc(var(--onboarding-padding) * -5.5);\n    width: var(--button-size);\n  }\n  .introjs-prevbutton {\n    left: 0;\n  }\n  .introjs-nextbutton {\n    right: 0;\n  }\n  .introjs-donebutton {\n    --interactive-rgb: var(--rgb-secondary-01);\n    --button-background: var(--color-primary-default);\n    --button-color: var(--color-secondary-01);\n    --button-padding: 0 var(--spacing-scale-3x);\n    --button-radius: 100em;\n    text-shadow: none;\n    width: auto;\n    position: static;\n    float: none;\n    margin-bottom: var(--onboarding-padding);\n  }\n  .introjs-disabled {\n    @include disabled;\n  }\n}\n\n@mixin onboarding-bullets {\n  .introjs-bullets {\n    ul {\n      li {\n        a {\n          background: var(--off);\n          opacity: var(--disabled);\n          position: relative;\n          z-index: 1;\n          &.active {\n            background: var(--color-primary-lighten-01);\n            opacity: 1;\n            width: 6px;\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin onboarding-skip {\n  .introjs-tooltip-header {\n    .introjs-skipbutton {\n      visibility: hidden;\n      position: absolute;\n      z-index: 0;\n    }\n  }\n  .introjs-skip {\n    margin-bottom: var(--onboarding-padding);\n    text-align: center;\n    position: relative;\n    z-index: 1;\n  }\n}\n\n@mixin onboarding-tooltip {\n  background: var(--onboarding-tooltip-background);\n  color: var(--onboarding-tooltip-color);\n  .introjs-arrow {\n    &.left-bottom {\n      border-right-color: var(--onboarding-tooltip-background);\n    }\n    &.right-bottom {\n      border-left-color: var(--onboarding-tooltip-background);\n    }\n    &.top,\n    &.top-middle,\n    &.top-right {\n      border-bottom-color: var(--onboarding-tooltip-background);\n    }\n    &.bottom {\n      border-top-color: var(--onboarding-tooltip-background);\n    }\n  }\n}\n\n@mixin onboarding-floating {\n  &.introjs-floating {\n    background: var(--onboarding-background);\n    color: var(--onboarding-color);\n    .introjs-nextbutton {\n      --interactive-rgb: var(--rgb-secondary-01);\n      --button-background: var(--color-primary-default);\n      --button-color: var(--color-secondary-01);\n    }\n    .introjs-prevbutton {\n      --button-background: var(--color-secondary-01);\n      --button-border: var(--color-primary-default);\n    }\n  }\n}\n\n.introjs-tooltip {\n  @include onboarding;\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n  $min: map-get($breakpoints, $name);\n  @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n  $next: breakpoint-next($name, $breakpoints);\n  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($lower, $breakpoints);\n  $max: breakpoint-max($upper, $breakpoints);\n\n  @if $min != null and $max != null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max == null {\n    @include media-breakpoint-up($lower, $breakpoints) {\n      @content;\n    }\n  } @else if $min == null {\n    @include media-breakpoint-down($upper, $breakpoints) {\n      @content;\n    }\n  }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $min != null and $max != null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max == null {\n    @include media-breakpoint-up($name, $breakpoints) {\n      @content;\n    }\n  } @else if $min == null {\n    @include media-breakpoint-down($name, $breakpoints) {\n      @content;\n    }\n  }\n}\n","@mixin button {\n  @include button-tokens;\n  @include button-base;\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}\n\n@mixin button-tokens {\n  --button-background: transparent;\n  --button-border: transparent;\n  --button-color: var(--interactive);\n  --button-radius: 100em;\n  --button-font-size: var(--font-size-scale-up-01);\n  --button-font-weight: var(--font-weight-semi-bold);\n  --button-xsmall: 24px;\n  --button-small: 32px;\n  --button-medium: 40px;\n  --button-large: 48px;\n  --button-size: var(--button-medium);\n  --button-padding: 0 var(--spacing-scale-3x);\n  --button-img: 20px;\n}\n\n@mixin button-base {\n  --interactive-rgb: var(--rgb-primary-default);\n  align-items: center;\n  background-color: var(--button-background);\n  border: 1px solid var(--button-border);\n  border-radius: var(--button-radius);\n  color: var(--button-color);\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  height: var(--button-size);\n  justify-content: center;\n  padding: var(--button-padding);\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  width: auto;\n\n  img {\n    max-height: var(--button-img);\n  }\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(--rgb-secondary-01);\n    --button-background: var(--color-primary-default);\n    --button-color: var(--color-secondary-01);\n\n    &.inverted,\n    &.is-inverted,\n    &[inverted] {\n      --interactive-rgb: var(--rgb-primary-default);\n      --hover: var(--surface-opacity-xs, 0.16);\n      --button-background: var(--color-secondary-01);\n      --button-color: var(--color-primary-default);\n    }\n  }\n\n  &.secondary,\n  &[secondary],\n  &.is-secondary {\n    --button-background: var(--color-secondary-01);\n    --button-border: var(--color-primary-default);\n\n    &.inverted,\n    &.is-inverted,\n    &[inverted] {\n      --hover: var(--surface-opacity-xs, 0.16);\n      --button-background: var(--color-primary-default);\n      --button-border: var(--color-secondary-01);\n      --button-color: var(--color-secondary-01);\n    }\n  }\n\n  &.inverted,\n  &.is-inverted,\n  &[inverted] {\n    --interactive: var(--color-secondary-01);\n    --interactive-rgb: var(--rgb-secondary-01);\n    --hover: var(--surface-opacity-sm, 0.3);\n    --focus-color: var(--color-support-10);\n  }\n}\n\n@mixin button-colors {\n  @each $color in \"danger\", \"success\", \"warning\", \"info\" {\n    &.#{$color},\n    &[#{$color}],\n    &.is-#{$color} {\n      --button-background: var(--color-#{$color});\n      @if $color != \"warning\" {\n        --button-color: var(--color-secondary-01);\n      }\n    }\n  }\n}\n\n@mixin button-states {\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:not(:disabled) {\n    @include focus;\n    @include hover;\n  }\n\n  &.active,\n  &.is-active,\n  &[active] {\n    --button-background: var(--active);\n    --button-color: var(--color-secondary-01);\n\n    &:hover {\n      --interactive-rgb: var(--rgb-secondary-01);\n      --hover: var(--surface-opacity-sm, 0.3);\n    }\n  }\n\n  &.loading,\n  &[loading],\n  &.is-loading {\n    &::after {\n      border-color: var(--button-color) var(--button-color) transparent;\n      border-style: solid;\n    }\n\n    &.primary,\n    &.danger,\n    &.success,\n    &.info {\n      &::after {\n        border-color: var(--button-color) var(--button-color) transparent;\n      }\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// Hover\n@mixin hover {\n  &:not(:disabled) {\n    &:hover {\n      background-image: linear-gradient(\n        rgba(var(--interactive-rgb), var(--hover)),\n        rgba(var(--interactive-rgb), var(--hover))\n      );\n    }\n    &:active {\n      background-image: linear-gradient(\n        rgba(var(--interactive-rgb), var(--pressed)),\n        rgba(var(--interactive-rgb), var(--pressed))\n      );\n    }\n  }\n}\n\n// Focus\n@mixin focus {\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible,\n  &:focus-visible {\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\n@mixin focus-shadow {\n  border-color: var(--focus-color);\n  box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n  outline: none;\n}\n\n// Ativo\n@mixin active {\n  background: var(--active);\n  color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n  --text-color: var(--color-secondary-01);\n  --interactive: var(--color-primary-pastel-01);\n  --interactive-rgb: var(--rgb-primary-pastel-01);\n  --visited: var(--color-secondary-04);\n  --hover: var(--surface-opacity-sm, 0.3);\n  --pressed: var(--surface-opacity-lg, 0.65);\n  --focus-color: var(--color-support-10);\n  --active: var(--color-secondary-01);\n}\n"],"sourceRoot":""}