{"version":3,"sources":["../../../../src/components/button/button.scss","../../../../src/components/icon/icon.scss","../../../../src/components/typography/a/a.scss","../../../../src/components/typography/body/body.scss","../../../../src/components/typography/h1/h1.scss","../../../../src/components/typography/h2/h2.scss","../../../../src/components/typography/h3/h3.scss","../../../../src/components/typography/hr/hr.scss","../../../../src/components/typography/p/p.scss","../../../../src/components/typography/placeholder/placeholder.scss","../../../../src/components/typography/ul/ul.scss","../../../../src/components/banner/banner.scss"],"names":[],"mappings":"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","file":"banner.css","sourcesContent":[".mykn-button {\n  $self: &;\n\n  --mykn-button-color-background: var(--button-primary-default-background);\n  --mykn-button-color-border: var(--button-primary-default-border);\n  --mykn-button-color-text: var(--button-primary-default-text);\n  --mykn-button-color-shadow: var(--button-primray-default-shadow);\n\n  --mykn-button-font-size: var(--typography-font-size-body-s);\n  --mykn-button-font-weight: var(--typography-font-weight-normal);\n  --mykn-button-line-height: var(--typography-line-height-body-s);\n  --mykn-button-height: auto;\n  --mykn-button-min-width: 88px;\n  --mykn-button-width: auto;\n  --mykn-button-offset: 0px;\n\n  --mykn-button-padding-v: 0;\n  --mykn-button-padding-h: 0;\n\n  align-items: center;\n  appearance: none;\n  margin: 0;\n  padding-block: var(--mykn-button-padding-v);\n  padding-inline: var(--mykn-button-padding-h);\n  background-color: var(--mykn-button-color-background);\n  border: 1px solid var(--mykn-button-color-border, transparent);\n  border-radius: var(--sizes-border-radius-s);\n  box-shadow: 0 calc(var(--mykn-button-offset) * -1)\n    var(--mykn-button-color-shadow);\n  box-sizing: border-box;\n  color: var(--mykn-button-color-text);\n  cursor: pointer;\n  gap: 0.5em;\n  height: var(--mykn-button-height);\n  font-family: var(--typography-font-family-body), serif;\n  font-size: var(--mykn-button-font-size);\n  font-weight: var(--mykn-button-font-weight);\n  line-height: calc(var(--mykn-button-line-height) - 2px);\n  text-decoration: none;\n  transition: all var(--animation-duration-fast)\n    var(--animation-timing-function);\n  transform: translateY(var(--mykn-button-offset));\n  white-space: nowrap;\n  width: var(--mykn-button-width);\n\n  &:not([hidden]) {\n    display: inline-flex;\n  }\n\n  &:disabled,\n  &--disabled {\n    --mykn-button-offset: 0 !important;\n    pointer-events: none;\n    opacity: 0.4;\n  }\n\n  &--align-start {\n    justify-content: start;\n    text-align: start;\n  }\n\n  &--align-center {\n    justify-content: center;\n    text-align: center;\n  }\n\n  &--align-space-between {\n    justify-content: space-between;\n    text-align: center;\n  }\n\n  &--align-end {\n    justify-content: end;\n    text-align: end;\n  }\n\n  &--bold {\n    --mykn-button-font-weight: var(--typography-font-weight-bold);\n  }\n\n  &--justify {\n    --mykn-button-width: 100%;\n  }\n\n  &--min-width {\n    min-width: var(--mykn-button-min-width);\n  }\n\n  &--pad-h {\n    --mykn-button-padding-h: var(--sizes-spacing-xs-h);\n  }\n\n  &--pad-v {\n    --mykn-button-padding-v: var(\n      --mykn-button-padding-xs,\n      var(--sizes-spacing-xs-v)\n    );\n  }\n\n  &--size-xl {\n    --mykn-button-font-size: var(--typography-font-size-xl);\n    --mykn-button-line-height: var(--typography-line-height-xl);\n    --mykn-button-padding-xs: calc(var(--sizes-spacing-xs-h) / 2);\n  }\n\n  &--size-xs {\n    --mykn-button-font-size: var(--typography-font-size-body-xs);\n    --mykn-button-line-height: var(--typography-line-height-body-xs);\n    --mykn-button-padding-xs: calc(var(--sizes-spacing-xs-h) / 2);\n  }\n\n  &--size-xxs {\n    --mykn-button-font-size: var(--typography-font-size-body-xs);\n    --mykn-button-line-height: var(--typography-line-height-body-xs);\n    --mykn-button-padding-xs: calc(var(--sizes-spacing-xs-h) / 2);\n    --mykn-button-height: calc(3 * var(--sizes-spacing-xs-h) + 2px) !important;\n    --mykn-button-width: calc(3 * var(--sizes-spacing-xs-h) + 2px) !important;\n  }\n\n  &--rounded {\n    border-radius: 100%;\n  }\n\n  &--square {\n    --mykn-button-height: calc(\n      var(--mykn-button-line-height) + 2 *\n        var(--mykn-button-padding-xs, var(--mykn-button-padding-v)) + 2px\n    );\n    --mykn-button-width: calc(\n      var(--mykn-button-line-height) + 2 *\n        var(--mykn-button-padding-xs, var(--mykn-button-padding-v)) + 2px\n    );\n    padding-block: 0;\n    padding-inline: 0;\n    flex-shrink: 0;\n  }\n\n  &--variant-primary {\n    --mykn-button-color-background: var(--button-primary-default-background);\n    --mykn-button-color-border: var(--button-primary-default-border);\n    --mykn-button-color-text: var(--button-primary-default-text);\n    --mykn-button-color-shadow: var(--button-primary-default-shadow);\n    &:focus,\n    &:hover {\n      --mykn-button-color-background: var(--button-primary-hover-background);\n      --mykn-button-color-border: var(--button-primary-hover-border);\n      --mykn-button-color-text: var(--button-primary-hover-text);\n      --mykn-button-color-shadow: var(--button-primary-hover-shadow);\n      --mykn-button-offset: -2px;\n    }\n\n    &:active {\n      // pressed\n      --mykn-button-color-background: var(--button-primary-pressed-background);\n      --mykn-button-color-border: var(--button-primary-pressed-border);\n      --mykn-button-color-text: var(--button-primary-pressed-text);\n      --mykn-button-color-shadow: var(--button-primary-pressed-shadow);\n      --mykn-button-offset: 0px;\n    }\n\n    &[aria-expanded=\"true\"],\n    &#{$self}--active {\n      --mykn-button-color-background: var(--button-primary-active-background);\n      --mykn-button-color-border: var(--button-primary-active-border);\n      --mykn-button-color-text: var(--button-primary-active-text);\n      --mykn-button-color-shadow: var(--button-primary-active-shadow);\n      --mykn-button-font-weight: var(--typography-font-weight-bold);\n    }\n\n    &:disabled,\n    &#{$self}--disabled,\n    &#{$self}--muted {\n      --mykn-button-color-background: var(--button-primary-disabled-background);\n      --mykn-button-color-border: var(--button-primary-disabled-border);\n      --mykn-button-color-text: var(--button-primary-disabled-text);\n      --mykn-button-color-shadow: var(--button-primary-disabled-shadow);\n    }\n  }\n\n  &--variant-secondary {\n    --mykn-button-color-background: var(--button-secondary-default-background);\n    --mykn-button-color-border: var(--button-secondary-default-border);\n    --mykn-button-color-text: var(--button-secondary-default-text);\n    --mykn-button-color-shadow: var(--button-secondary-default-shadow);\n\n    &:focus,\n    &:hover {\n      --mykn-button-color-background: var(--button-secondary-hover-background);\n      --mykn-button-color-border: var(--button-secondary-hover-border);\n      --mykn-button-color-text: var(--button-secondary-hover-text);\n      --mykn-button-color-shadow: var(--button-secondary-hover-shadow);\n      --mykn-button-offset: -2px;\n    }\n\n    &:active {\n      // pressed\n      --mykn-button-color-background: var(\n        --button-secondary-pressed-background\n      );\n      --mykn-button-color-border: var(--button-secondary-pressed-border);\n      --mykn-button-color-text: var(--button-secondary-pressed-text);\n      --mykn-button-color-shadow: var(--button-secondary-pressed-shadow);\n      --mykn-button-offset: 0px;\n    }\n\n    &[aria-expanded=\"true\"],\n    &#{$self}--active {\n      --mykn-button-color-background: var(--button-secondary-active-background);\n      --mykn-button-color-border: var(--button-secondary-active-border);\n      --mykn-button-color-text: var(--button-secondary-active-text);\n      --mykn-button-color-shadow: var(--button-secondary-active-shadow);\n      --mykn-button-font-weight: var(--typography-font-weight-bold);\n    }\n\n    &:disabled,\n    &#{$self}--disabled,\n    &#{$self}--muted {\n      --mykn-button-color-background: var(\n        --button-secondary-disabled-background\n      );\n      --mykn-button-color-border: var(--button-secondary-disabled-border);\n      --mykn-button-color-text: var(--button-secondary-disabled-text);\n      --mykn-button-color-shadow: var(--button-secondary-disabled-shadow);\n    }\n  }\n\n  &--variant-outline {\n    --mykn-button-color-background: var(--button-outline-default-background);\n    --mykn-button-color-border: var(--button-outline-default-border);\n    --mykn-button-color-text: var(--button-outline-default-text);\n    --mykn-button-color-shadow: var(--button-outline-default-shadow);\n\n    &:focus,\n    &:hover {\n      --mykn-button-color-background: var(--button-outline-hover-background);\n      --mykn-button-color-border: var(--button-outline-hover-border);\n      --mykn-button-color-text: var(--button-outline-hover-text);\n      --mykn-button-color-shadow: var(--button-outline-hover-shadow);\n      --mykn-button-offset: -2px;\n    }\n\n    &:active {\n      // pressed\n      --mykn-button-color-background: var(--button-outline-pressed-background);\n      --mykn-button-color-border: var(--button-outline-pressed-border);\n      --mykn-button-color-text: var(--button-outline-pressed-text);\n      --mykn-button-color-shadow: var(--button-outline-pressed-shadow);\n      //--mykn-button-offset: 0px;\n    }\n\n    &[aria-expanded=\"true\"],\n    &#{$self}--active {\n      --mykn-button-color-background: var(--button-outline-active-background);\n      --mykn-button-color-border: var(--button-outline-active-border);\n      --mykn-button-color-text: var(--button-outline-active-text);\n      --mykn-button-color-shadow: var(--button-outline-active-shadow);\n      --mykn-button-font-weight: var(--typography-font-weight-bold);\n    }\n\n    &:disabled,\n    &#{$self}--disabled,\n    &#{$self}--muted {\n      --mykn-button-color-background: var(--button-outline-disabled-background);\n      --mykn-button-color-border: var(--button-outline-disabled-border);\n      --mykn-button-color-text: var(--button-outline-disabled-text);\n      --mykn-button-color-shadow: var(--button-outline-disabled-shadow);\n    }\n  }\n\n  &--variant-transparent {\n    --mykn-button-color-background: var(\n      --button-transparent-default-background\n    );\n    --mykn-button-color-border: var(--button-transparent-default-border);\n    --mykn-button-color-text: var(--button-transparent-default-text);\n    --mykn-button-color-shadow: var(--button-transparent-default-shadow);\n\n    &:focus,\n    &:hover {\n      --mykn-button-color-background: var(\n        --button-transparent-hover-background\n      );\n      --mykn-button-color-border: var(--button-transparent-hover-border);\n      --mykn-button-color-text: var(--button-transparent-hover-text);\n      --mykn-button-color-shadow: var(--button-transparent-hover-shadow);\n      --mykn-button-offset: -2px;\n    }\n\n    &:active {\n      // pressed\n      --mykn-button-color-background: var(\n        --button-transparent-pressed-background\n      );\n      --mykn-button-color-border: var(--button-transparent-pressed-border);\n      --mykn-button-color-text: var(--button-transparent-pressed-text);\n      --mykn-button-color-shadow: var(--button-transparent-pressed-shadow);\n      --mykn-button-offset: 0px;\n    }\n\n    &[aria-expanded=\"true\"],\n    &#{$self}--active {\n      --mykn-button-color-background: var(\n        --button-transparent-active-background\n      );\n      --mykn-button-color-border: var(--button-transparent-active-border);\n      --mykn-button-color-text: var(--button-transparent-active-text);\n      --mykn-button-color-shadow: var(--button-transparent-active-shadow);\n      --mykn-button-font-weight: var(--typography-font-weight-bold);\n    }\n\n    &:disabled,\n    &#{$self}--disabled,\n    &#{$self}--muted {\n      --mykn-button-color-background: var(\n        --button-transparent-disabled-background\n      );\n      --mykn-button-color-border: var(--button-transparent-disabled-border);\n      --mykn-button-color-text: var(--button-transparent-disabled-text);\n      --mykn-button-color-shadow: var(--button-transparent-disabled-shadow);\n    }\n  }\n\n  @each $variant in (\"info\", \"success\", \"warning\", \"danger\") {\n    &--variant-#{$variant} {\n      --mykn-button-color-background: var(\n        --button-#{$variant}-default-background\n      );\n      --mykn-button-color-border: var(--button-#{$variant}-default-border);\n      --mykn-button-color-text: var(--button-#{$variant}-default-text);\n      --mykn-button-color-shadow: var(--button-#{$variant}-default-shadow);\n\n      &:focus,\n      &:hover {\n        --mykn-button-color-background: var(\n          --button-#{$variant}-hover-background\n        );\n        --mykn-button-color-border: var(--button-#{$variant}-hover-border);\n        --mykn-button-color-text: var(--button-#{$variant}-hover-text);\n        --mykn-button-color-shadow: var(--button-#{$variant}-hover-shadow);\n        --mykn-button-offset: -2px;\n      }\n\n      &:active {\n        // pressed\n        --mykn-button-color-background: var(\n          --button-#{$variant}-pressed-background\n        );\n        --mykn-button-color-border: var(--button-#{$variant}-pressed-border);\n        --mykn-button-color-text: var(--button-#{$variant}-pressed-text);\n        --mykn-button-color-shadow: var(--button-#{$variant}-pressed-shadow);\n        --mykn-button-offset: 0px;\n      }\n\n      &[aria-expanded=\"true\"],\n      &#{$self}--active {\n        --mykn-button-color-background: var(\n          --button-#{$variant}-active-background\n        );\n        --mykn-button-color-border: var(--button-#{$variant}-active-border);\n        --mykn-button-color-text: var(--button-#{$variant}-active-text);\n        --mykn-button-color-shadow: var(--button-#{$variant}-active-shadow);\n        --mykn-button-font-weight: var(--typography-font-weight-bold);\n      }\n\n      &:disabled,\n      &#{$self}--disabled,\n      &#{$self}--muted {\n        --mykn-button-color-background: var(\n          --button-#{$variant}-disabled-background\n        );\n        --mykn-button-color-border: var(--button-#{$variant}-disabled-border);\n        --mykn-button-color-text: var(--button-#{$variant}-disabled-text);\n        --mykn-button-color-shadow: var(--button-#{$variant}-disabled-shadow);\n      }\n    }\n  }\n\n  &--wrap {\n    flex-wrap: wrap;\n    white-space: normal;\n  }\n}\n",".mykn-icon {\n  --mykn-icon-size: 1em;\n  height: var(--mykn-icon-size);\n  vertical-align: middle;\n  // TODO: Implement proper sizing system for icon\n  transform: scale(1.33);\n  transition: all var(--animation-duration-medium)\n    var(--animation-timing-function);\n  width: var(--mykn-icon-size);\n\n  &--flip-x {\n    transform: rotate(180deg);\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  &--spin {\n    animation: spin var(--animation-duration-slow)\n      var(--animation-timing-function) infinite;\n  }\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n",".mykn-a {\n  line-height: var(--typography-line-height-body-s);\n  align-items: center;\n  color: var(--typography-color-link);\n  display: inline-flex;\n  font-family: inherit;\n  font-size: inherit;\n  justify-content: center;\n  font-weight: inherit;\n  gap: 0.5em;\n  width: fit-content;\n\n  &:not(\n    .mykn-h1 .mykn-a,\n    .mykn-h2 .mykn-a,\n    .mykn-h3 .mykn-a,\n    .mykn-li .mykn-a,\n    .mykn-p .mykn-a\n  ) {\n    font-family: var(--typography-font-family-body), serif;\n    font-size: var(--typography-font-size-body-s);\n    line-height: var(--typography-line-height-body-s);\n  }\n\n  &--size-xs {\n    &:not(\n      .mykn-h1 .mykn-a,\n      .mykn-h2 .mykn-a,\n      .mykn-h3 .mykn-a,\n      .mykn-li .mykn-a,\n      .mykn-p .mykn-a\n    ) {\n      font-size: var(--typography-font-size-body-xs);\n      line-height: var(--typography-line-height-body-xs);\n    }\n  }\n\n  &--text-decoration-none {\n    text-decoration: none;\n\n    &#{&}:hover {\n      text-decoration: underline;\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &#{&}--muted {\n    color: var(--typography-color-muted);\n  }\n\n  &[aria-current] {\n    font-weight: var(--typography-font-weight-bold);\n  }\n}\n","@use \"../../../settings/constants\";\n\n.mykn-body {\n  padding: var(--sizes-spacing-xs-v) var(--sizes-spacing-xs-h);\n\n  .mykn-h1,\n  .mykn-h2,\n  .mykn-h3,\n  .mykn-p,\n  .mykn-ol,\n  .mykn-ul {\n    &:not(:last-child) {\n      margin-block-end: var(--sizes-spacing-xs-v);\n    }\n  }\n\n  &--allow-scroll-h {\n    overflow-x: auto;\n  }\n\n  &--allow-scroll-v {\n    overflow-y: auto;\n  }\n\n  &--full-height {\n    height: 100%;\n  }\n\n  @media screen and (min-width: constants.$breakpoint-desktop) {\n    padding: var(--sizes-spacing-xs-v) var(--sizes-spacing-xs-h);\n  }\n}\n",".mykn-h1 {\n  align-items: center;\n  color: var(--typography-color-h);\n  display: flex;\n  font-family: var(--typography-font-family-h);\n  font-size: var(--typography-font-size-h1);\n  font-weight: var(--typography-font-weight-heading);\n  line-height: var(--typography-line-height-h1);\n  margin-block-start: 0;\n  margin-block-end: 0;\n}\n",".mykn-h2 {\n  align-items: center;\n  color: var(--typography-color-h);\n  display: flex;\n  font-family: var(--typography-font-family-h);\n  font-size: var(--typography-font-size-h2);\n  font-weight: var(--typography-font-weight-heading);\n  line-height: var(--typography-line-height-h2);\n  margin-block-start: 0;\n  margin-block-end: 0;\n}\n",".mykn-h3 {\n  align-items: center;\n  color: var(--typography-color-h);\n  display: flex;\n  //font-family: var(--typography-font-family-h);\n  font-family: var(--typography-font-family-body); // TODO: Configurable?\n  font-size: var(--typography-font-size-h3);\n  font-weight: var(--typography-font-weight-heading);\n  line-height: var(--typography-line-height-h3);\n  margin-block-start: 0;\n  margin-block-end: 0;\n}\n",".mykn-hr {\n  border: 0;\n  border-bottom: 1px solid var(--typography-color-border);\n  margin: 0;\n\n  &--margin-xs {\n    margin: var(--sizes-spacing-xs-v) 0;\n  }\n\n  &--margin-s {\n    margin: var(--sizes-spacing-s-v) 0;\n  }\n\n  &--margin-m {\n    margin: var(--sizes-spacing-m-v) 0;\n  }\n}\n",".mykn-p {\n  color: var(--typography-color-body);\n  font-family: var(--typography-font-family-body);\n  font-size: var(--typography-font-size-body-s);\n  font-weight: var(--typography-font-weight-normal);\n  line-height: var(--typography-line-height-body-s);\n  margin-block-start: 0;\n  margin-block-end: 0;\n\n  &--bold {\n    font-weight: var(--typography-font-weight-bold);\n  }\n\n  &--muted {\n    color: var(--typography-color-muted);\n  }\n\n  &--size-xs {\n    font-size: var(--typography-font-size-body-xs);\n    line-height: var(--typography-line-height-body-xs);\n  }\n\n  &--word-break-break-all {\n    word-break: break-all;\n  }\n\n  // https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#syntax\n  // https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word\n  &--word-break-break-word {\n    overflow-wrap: anywhere;\n    word-break: normal;\n  }\n}\n",".mykn-placeholder {\n  --mykn-placeholder-color-dark: var(--placeholder-background-dark);\n  --mykn-placeholder-color-light: var(--placeholder-background-light);\n\n  animation: shift-background var(--animation-duration-slow) infinite\n    var(--animation-timing-function) reverse;\n  background: linear-gradient(\n    90deg,\n    var(--mykn-placeholder-color-dark),\n    var(--mykn-placeholder-color-light),\n    var(--mykn-placeholder-color-dark)\n  );\n  background-size: 200% 100%;\n  border: none;\n  border-radius: 1em;\n  display: inline-block;\n  height: 1em;\n  margin: 0;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n}\n\n@keyframes shift-background {\n  0% {\n    background-position: 0% 0%;\n  }\n  100% {\n    background-position: 200% 0%;\n  }\n}\n",".mykn-ul {\n  margin: 0;\n  color: var(--typography-color-body);\n  font-family: var(--typography-font-family-body);\n  font-size: var(--typography-font-size-body-s);\n  font-weight: var(--typography-font-weight-normal);\n  line-height: var(--typography-line-height-body-s);\n  list-style-position: inside;\n  padding-inline-start: 0;\n\n  .mykn-ul {\n    padding-inline-start: var(--sizes-spacing-xs-h);\n  }\n}\n",".mykn-banner {\n  --mykn-banner-icon-color: var(--banner-background);\n  --mykn-banner-border-color: var(--banner-border);\n\n  border: 1px solid;\n  border-color: var(--mykn-banner-border-color);\n  border-radius: var(--sizes-border-radius-s);\n  display: flex;\n  align-items: center;\n  padding: var(--sizes-spacing-xs-v);\n  background-color: var(--banner-background);\n  color: var(--mykn-banner-color);\n  position: relative;\n  min-height: 60px;\n\n  &--variant-info {\n    --mykn-banner-color: var(--banner-info-background);\n    --mykn-banner-border-color: var(--banner-info-border);\n  }\n\n  &--variant-success {\n    --mykn-banner-color: var(--banner-success-background);\n    --mykn-banner-border-color: var(--banner-success-border);\n  }\n\n  &--variant-warning {\n    --mykn-banner-color: var(--banner-warning-background);\n    --mykn-banner-border-color: var(--banner-warning-border);\n  }\n\n  &--variant-danger {\n    --mykn-banner-color: var(--banner-danger-background);\n    --mykn-banner-border-color: var(--banner-danger-border);\n  }\n\n  &__icon {\n    flex-shrink: 0;\n    margin-inline-end: var(--sizes-spacing-xs-v);\n    width: 36px;\n    height: 36px;\n  }\n\n  &__content {\n    flex: 1;\n  }\n\n  &__title {\n    margin-bottom: var(--sizes-spacing-xs-xs);\n  }\n}\n"]}