{"version":3,"file":"components/item/item.min.css","mappings":"AAKA,SCME,wCAAyC,CACzC,0CAA2C,CAC3C,0DAA2D,CAI3D,0CAA6C,CDX7C,4BAA6B,CCY7B,QAAS,CACT,kBAAmB,CACnB,aAAc,CACd,8BAA+B,CAC/B,2BAA4B,CAC5B,eAAgB,CAChB,UDXF,CCcE,cACE,8CAAiD,CACjD,+CDZJ,CCcI,+CAEE,sCAAuC,CACvC,uCDZN,CCiBE,eACE,UAAW,CACX,UAAW,CACX,aDfJ,CCmBE,sBACE,cDjBJ,CEtBI,qDACE,yGFwBN,CC0BI,+EAIE,oEDxBN,CC2BQ,uGACE,oCAAqC,CACrC,iCAAkC,CAClC,OAAQ,CACR,UDzBV,CC2BU,qHACE,0BAA2B,CAC3B,qCDzBZ,CC4BU,mHACE,MAAO,CACP,OD1BZ,CC+BU,+JACE,qBD7BZ,CCsCM,sDACE,+DDpCR,CCsCQ,kEACE,yFDpCV,CCuCQ,4DACE,sCAAuC,CACvC,qCDrCV,CCwCQ,4DACE,+BDtCV,CCwCU,kEACE,QAAS,CACT,ODtCZ,CC+CM,+BACE,4DAA+D,CAC/D,wFD7CR,CC+CQ,qCACE,+DAAgE,CAChE,oED7CV,CCgDQ,qCACE,4BD9CV,CCgDU,2CACE,iCAAkC,CAClC,gCD9CZ,CCgEE,wWEjIA,0BACA,kCACA,+BACA,sCACA,8CACA,8BACA,0BACA,8BACA,sCACA,+BHyPF,CCjIE,kBAEE,gCD+HJ,CC3HE,gBAEE,8BAA+B,CAC/B,kBDsIJ,CClIE,qDE9IA,0BACA,kCACA,+BACA,sCACA,8CACA,8BACA,0BACA,8BACA,sCACA,+BHmRF,CC1II,mDE3HF,2BACA,mCACA,gCACA,uCACA,oCACA,+BACA,2BACA,+BACA,uCACA,iCFoHI,wCAAyC,CACzC,mBDqJN,CEzTI,2CACE,yGF2TN,CC7IM,iCACE,wBD+IR,CCrHE,kBACE,kBAAmB,CACnB,YDuHJ,CClHE,sBACE,WAAY,CACZ,oBDoHJ,CApUA,4CACE,wBA0UF,CE9UI,+BACE,qHFgVN,CIlVI,gCACE,yHJoVN,CA3UA,eACE,4BAA6B,CAC7B,kBA8UF,CK3VE,qBACE,YL6VJ,CK1VE,0DAEE,0BAA2B,CAC3B,kCAAmC,CACnC,gCAAiC,CACjC,gCL2VJ,CElWI,oCACE,yGFoWN,CItWI,qCACE,6GJwWN","sources":["webpack://core/./src/components/item/_item.scss","webpack://core/./src/components/item/_mixins.scss","webpack://core/./src/partial/scss/mixins/_hover.scss","webpack://core/./src/partial/scss/mixins/_states.scss","webpack://core/./src/partial/scss/mixins/_active.scss","webpack://core/./src/partial/scss/mixins/_focus.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}item {\n  background: var(--background);\n  @include item-configs;\n}\n\n// Item aplicado em link/botão\na.#{$prefix}item {\n  color: var(--interactive);\n  @include hover;\n  @include active;\n}\n\nbutton.#{$prefix}item {\n  background-color: transparent;\n  color: var(--color);\n  @include focus;\n  @include hover(\"color\");\n  @include active(\"color\");\n}\n","@mixin item-configs {\n  @include item-tokens;\n  @include item-default;\n  @include item-checkbox;\n  @include item-colors;\n  @include item-states;\n  @include item-toggle;\n  @include item-datatoggle-list;\n}\n\n@mixin item-tokens {\n  --item-padding-x: var(--spacing-scale-2x);\n  --item-padding-y: var(--spacing-scale-base);\n  --item-padding: var(--item-padding-y) var(--item-padding-x);\n}\n\n@mixin item-default {\n  --focus-offset: calc(var(--focus-width) * -1);\n  border: 0;\n  color: var(--color);\n  display: block;\n  font-weight: var(--font-weight);\n  padding: var(--item-padding);\n  text-align: left;\n  width: 100%;\n\n  // Regras para Grid interna\n  .row {\n    margin-left: calc(-1 * var(--spacing-scale-base));\n    margin-right: calc(-1 * var(--spacing-scale-base));\n\n    .col,\n    [class*=\"col-\"] {\n      padding-left: var(--spacing-scale-base);\n      padding-right: var(--spacing-scale-base);\n    }\n  }\n\n  // Fix para floats internos\n  &::after {\n    clear: both;\n    content: \"\";\n    display: block;\n  }\n\n  // Transforma curso em cursor pointer quando br-item eh data-toggle\n  &[data-toggle] {\n    cursor: pointer;\n  }\n}\n\n// TODO: migrar customização do Select para o mixin abaixo\n@mixin item-checkbox {\n  &[data-toggle=\"selection\"] {\n    @include hover(\"color\");\n  }\n\n  & > .#{$prefix}checkbox,\n  & > .#{$prefix}radio {\n    &:not(.hidden-label) {\n      margin-bottom: calc(var(--item-padding-y) * -1);\n      margin-left: calc(var(--item-padding-x) * -1);\n      margin-right: calc(var(--item-padding-x) * -1);\n      margin-top: calc(var(--item-padding-y) * -1);\n\n      input {\n        + label {\n          padding-bottom: var(--item-padding-y);\n          padding-top: var(--item-padding-y);\n          top: 1px;\n          width: 100%;\n\n          &::before {\n            left: var(--item-padding-x);\n            top: calc(var(--item-padding-y) - 1px);\n          }\n\n          &:empty {\n            left: 0;\n            top: 1px;\n          }\n        }\n\n        &:hover:not(:disabled) {\n          + label::before {\n            background-image: none;\n          }\n        }\n      }\n    }\n  }\n\n  & > .#{$prefix}checkbox {\n    input:not(:indeterminate) {\n      + label {\n        min-height: calc(var(--checkbox-size) + var(--item-padding-y) * 2);\n\n        &:not(:empty) {\n          padding-left: calc(var(--checkbox-padding) + var(--checkbox-size) + var(--item-padding-x));\n        }\n\n        &::after {\n          left: calc(var(--item-padding-x) + 8px);\n          top: calc(var(--item-padding-y) + 4px);\n        }\n\n        &:empty {\n          min-height: var(--checkbox-size);\n\n          &::after {\n            left: 8px;\n            top: 4px;\n          }\n        }\n      }\n    }\n  }\n\n  .#{$prefix}radio {\n    input {\n      + label {\n        min-height: calc(var(--radio-size) + var(--item-padding-y) * 2);\n        padding-left: calc(var(--spacing-scale-base) + var(--radio-size) + var(--item-padding-x));\n\n        &::after {\n          left: calc(var(--item-padding-x) + var(--radio-bullet-position));\n          top: calc(var(--item-padding-y) + var(--radio-bullet-position) - 1px);\n        }\n\n        &:empty {\n          min-height: var(--radio-size);\n\n          &::after {\n            left: var(--radio-bullet-position);\n            top: var(--radio-bullet-position);\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin item-colors {\n  @each $key in map-keys($br-colors) {\n    &.#{$key} {\n      @include colorize($key);\n    }\n  }\n}\n\n@mixin item-states {\n  // Selecionado\n  &.selected {\n    @include dark-mode;\n    background-color: var(--selected);\n  }\n\n  // Ativo\n  &.active {\n    @include dark-mode;\n    background-color: var(--active);\n    color: var(--color);\n  }\n\n  // Dark-mode\n  &.inverted,\n  &.dark-mode {\n    @include dark-mode;\n\n    &.active {\n      @include light-mode($interactive-rgb: \"active-rgb\");\n      background-color: var(--background-light);\n      color: var(--active);\n    }\n  }\n}\n\n// TODO: Este mixin ainda é necessário?\n@mixin item-toggle {\n  &[data-toggle] {\n    @include hover(\"color\");\n\n    .content {\n      i {\n        color: var(--interactive);\n      }\n    }\n  }\n}\n\n@mixin item-center {\n  align-items: center;\n  display: flex;\n\n  .content {\n    flex: 1;\n  }\n\n  @include hover;\n}\n\n@mixin item-brackground-transparent {\n  &.active {\n    background: transparent;\n  }\n}\n\n@mixin item-datatoggle-list {\n  // Necessario devido a implementacao do fontawasome seguindo os padroes do projeto. Antes usava-se <i></i>\n  // Css ajusta o alinhamento do item  com o icone quando este faz parte de uma lista.\n  .content {\n    align-items: center;\n    display: flex;\n  }\n\n  // Necessario devido a implementacao do fontawasome seguindo os padroes do projeto. Antes usava-se <i></i>\n  // Css ajusta o tamanho do icone de seta quando item faz parte de uma lista.\n  [class*=\"fa-\"] {\n    height: 16px;\n    width: 14px !important;\n  }\n\n  // Necessario devido a implementacao do fontawasome seguindo os padroes do projeto. Antes usava-se <i></i>\n  // Atribuir a cor azul para seta datatoggle\n  .toogle-icon-interactive {\n    color: var(--interactive);\n  }\n}\n\n@mixin item-align-horizontal-list {\n  flex: 1;\n  height: auto;\n  min-height: 56px;\n  width: auto;\n}\n","/// Aplica hover: feedback ao colocar o cursor no elemento\n/// @param {String} $color [\"interactive\"] - Cor do hover **(Opcional)**\n/// @example scss - Uso prático\n///  a {\n///    @include hover;\n///  }\n@mixin hover($color: \"interactive\") {\n  &:not(:disabled) {\n    &:hover {\n      background-image: linear-gradient(\n        rgba(var(--#{$color}-rgb), var(--hover)),\n        rgba(var(--#{$color}-rgb), var(--hover))\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// 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","/// Aplica active: feedback ao clicar no elemento\n/// @example scss - Uso prático\n///  a {\n///    @include active;\n///  }\n@mixin active($color: \"interactive\") {\n  &:not(:disabled) {\n    &:active {\n      background-image: linear-gradient(\n        rgba(var(--#{$color}-rgb), var(--pressed)),\n        rgba(var(--#{$color}-rgb), var(--pressed))\n      );\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"],"names":[],"ignoreList":[],"sourceRoot":""}