{"version":3,"file":"components/notification/notification.css","mappings":"AAKA;ECGE;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;ADTF;ACWE;EDhBF;ICiBI;IACA;IACA;IACA;IACA;IACA;IACA;EDRF;ECUE;IACE;EDRJ;ECUI;IACE;IACA;IACA;EDRN;ECYE;IACE;IACA;EDVJ;ECaE;IACE;EDXJ;AACF;ACcE;EACE;IACE;EDZJ;AACF;ACeE;EACE;IACE;EDbJ;AACF;ACkBE;EACE;EACA;ADhBJ;ACkBI;EACE;ADhBN;ACwBM;EACE;ADtBR;ACyBM;EACE;ADvBR;ACwBQ;EACE;EACA;EACA;EACA;EACA;ADtBV;ACwBU;EACE;EACA;EACA;ADtBZ;ACyBU;EACE;ADvBZ,C","sources":["webpack://core/./src/components/notification/_notification.scss","webpack://core/./src/components/notification/_mixins.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}notification {\n  @include notification-configs;\n}\n","@mixin notification-configs {\n  @include notification-tokens;\n  @include notification-default;\n  @include notification-header;\n  @include notification-body;\n}\n\n@mixin notification-tokens {\n  --notification-padding: var(--spacing-scale-2x) var(--spacing-scale-4x);\n  --notification-width: 50vw;\n  --notification-height: calc(100vh - 86px);\n}\n\n@mixin notification-default {\n  background: var(--background);\n  box-shadow: var(--surface-shadow-md);\n  max-height: var(--notification-height);\n  max-width: var(--notification-width);\n  overflow: auto;\n  z-index: 1;\n\n  @media (max-width: $grid-breakpoint-sm) {\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    --notification-padding: var(--item-padding);\n    --notification-width: 100vw;\n    min-height: var(--notification-height);\n    overflow: hidden;\n\n    .#{$prefix}tab {\n      --tab-size: var(--tab-small);\n\n      .tab-content {\n        --notification-height: calc(100vh - 86px);\n        height: var(--notification-height);\n        overflow-x: auto;\n      }\n    }\n\n    .status {\n      left: var(--spacing-scale-half) !important;\n      top: var(--spacing-scale-2x) !important;\n    }\n\n    &.close {\n      display: none;\n    }\n  }\n\n  @media (max-width: $grid-breakpoint-md) {\n    &.close {\n      display: none;\n    }\n  }\n\n  @media (min-width: $grid-breakpoint-md) {\n    div.close {\n      display: none;\n    }\n  }\n}\n\n@mixin notification-header {\n  .notification-header {\n    border-bottom: 1px solid var(--border-color);\n    padding: var(--notification-padding);\n\n    *:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n\n@mixin notification-body {\n  .notification-body {\n    .#{$prefix}tab {\n      .tab-item {\n        padding: 0;\n      }\n\n      .tab-content {\n        overflow-y: auto;\n        .#{$prefix}item {\n          --interactive-rgb: var(--rgb-secondary-08);\n          --item-color: var(--text-color);\n          padding: var(--notification-padding);\n          position: relative;\n          white-space: normal;\n\n          .status {\n            left: var(--spacing-scale-base);\n            position: absolute;\n            top: var(--spacing-scale-3x);\n          }\n\n          span {\n            display: block;\n          }\n        }\n      }\n    }\n  }\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}