@postenbring/hedwig-css/dist/tabs.css.map

Styles for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

{"version":3,"sourceRoot":null,"mappings":"AAEA,qXAcE,0FAOE,8IAQE,4EAIA,4FAMF,2GAKE,uKAKE,wJASF,wcAnBF,oIAKE,gMAKE,iLASF,ieAmBF,yBACE,wKAKE,oLAKE,mLAOA,wHAIA,wHAMF,8eAsBN","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/tabs/tabs.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/tabs/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-tabs {\n  --_hds-tabs-border-active-size: var(--hds-stroke-thick);\n  --_hds-tabs-marker-color: var(--hds-colors-signature);\n\n  /* Set by javascript. Controlles the animation of the tab marker */\n  --_hds-tabs-marker-border-fallback-color: var(--_hds-tabs-marker-color);\n  --_hds-tabs-marker-animated-color: transparent;\n  --_hds-tabs-marker-top: 0;\n  --_hds-tabs-marker-left: 0;\n  --_hds-tabs-marker-height: 0;\n  --_hds-tabs-marker-width: 0;\n\n  font: var(--hds-typography-body);\n\n  .hds-tabs__list {\n    padding-left: 0;\n    display: inline-flex;\n    width: auto;\n    position: relative;\n\n    /* Tab button */\n    .hds-tabs__tab {\n      cursor: pointer;\n      font: var(--hds-typography-body);\n      background: transparent;\n      color: inherit;\n      border: 0;\n      text-align: left;\n\n      &:hover {\n        color: var(--hds-colors-dark);\n      }\n\n      &.hds-tabs__tab--active {\n        color: var(--hds-colors-dark);\n      }\n    }\n\n    /* List styling */\n    &, /* Default */\n    &.hds-tabs__list--vertical {\n      border-left: 1px solid var(--hds-ui-colors-light-grey-fill);\n      flex-direction: column;\n\n      .hds-tabs__tab {\n        width: auto;\n        padding: var(--hds-spacing-8) var(--hds-spacing-16);\n        border-left: var(--_hds-tabs-border-active-size) solid transparent;\n\n        &.hds-tabs__tab--active {\n          border-color: var(\n            --_hds-tabs-marker-border-fallback-color,\n            var(--_hds-tabs-marker-color)\n          );\n        }\n      }\n\n      /* Marker animation */\n      &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        height: 100%;\n        width: var(--_hds-tabs-border-active-size);\n        scale: 1 var(--_hds-tabs-marker-height);\n        translate: 0 var(--_hds-tabs-marker-top);\n        transform-origin: top left;\n        transition-property: scale, translate;\n        transition-duration: var(--hds-micro-animation-duration-quick);\n        transition-timing-function: var(--hds-micro-animation-easing-out);\n        background-color: var(--_hds-tabs-marker-animated-color);\n      }\n    }\n\n    /* Horizontal list styling. Only available for medium screen sizes and up */\n    @media (--medium) {\n      &.hds-tabs__list--horizontal {\n        border-left: 0;\n        border-bottom: var(--hds-stroke-default) solid var(--hds-ui-colors-light-grey-fill);\n        flex-direction: row;\n\n        .hds-tabs__tab {\n          padding: var(--hds-spacing-12) 0;\n          border-bottom: var(--_hds-tabs-border-active-size) solid transparent;\n          border-left: 0;\n\n          &.hds-tabs__tab--active {\n            border-color: var(\n              --_hds-tabs-marker-border-fallback-color,\n              var(--_hds-tabs-marker-color)\n            );\n          }\n\n          &:not(:first-child) {\n            margin-left: var(--hds-spacing-16);\n          }\n\n          &:not(:last-child) {\n            margin-right: var(--hds-spacing-16);\n          }\n        }\n\n        /* Marker animation */\n        &::before {\n          content: \"\";\n          position: absolute;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          top: unset;\n          width: unset;\n          height: var(--_hds-tabs-border-active-size);\n          scale: var(--_hds-tabs-marker-width) 1;\n          translate: var(--_hds-tabs-marker-left) 0;\n          transform-origin: left;\n          transition-property: scale, translate;\n          transition-duration: var(--hds-micro-animation-duration-quick);\n          transition-timing-function: var(--hds-micro-animation-easing-out);\n          background-color: var(--_hds-tabs-marker-animated-color);\n        }\n      }\n    }\n  }\n\n  /* Tab contents */\n  .hds-tabs__contents {\n    margin-top: var(--hds-spacing-64);\n  }\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}