{"version":3,"sources":["../src/Layout/dark.scss","../src/index.scss","../src/Layout/base.scss"],"names":[],"mappings":"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","file":"view.min.css","sourcesContent":["$color_text: #eeeeee !default;\n$color_background: #252a33 !default;\n$color_base: #252a33 !default;\n$color_1: scale_color($color_base, $lightness: 7%) !default;\n$color_2: scale_color($color_base, $lightness: 10%) !default;\n$color_3: scale_color($color_base, $lightness: 15%) !default;\n$color_4: scale_color($color_base, $lightness: 20%) !default;\n$color_5: scale_color($color_base, $lightness: 25%) !default;\n$color_6: scale_color($color_base, $lightness: 30%) !default;\n$color_drag1: rgb(207, 232, 255) !default;\n$color_drag2: rgb(183, 209, 181) !default;\n$color_drag1_background: rgba(128, 128, 128, 0.15) !default;\n$color_drag2_background: rgba(128, 128, 128, 0.15) !default;\n\n$font-size: small !default;\n$font-family: Roboto, Arial, sans-serif !default;\n\n.flexlayout {\n  &__layout {\n    --color-text: #{$color_text};\n    --color-background: #{$color_background};\n    --color-base: #{$color_base};\n    --color-1: #{$color_1};\n    --color-2: #{$color_2};\n    --color-3: #{$color_3};\n    --color-4: #{$color_4};\n    --color-5: #{$color_5};\n    --color-6: #{$color_6};\n    --color-drag1: #{$color_drag1};\n    --color-drag2: #{$color_drag2};\n    --color-drag1-background: #{$color_drag1_background};\n    --color-drag2-background: #{$color_drag2_background};\n\n    --font-size: #{$font_size};\n    --font-family: #{$font_family};\n\n    --color-overflow: gray;\n    --color-icon: gray;\n\n    --color-tabset-background: var(--color-1);\n    --color-tabset-background-selected: var(--color-1);\n    --color-tabset-background-maximized: var(--color-6);\n    --color-tabset-divider-line: var(--color-4);\n\n    --color-tabset-header-background: var(--color-1);\n    --color-tabset-header: var(--color-text);\n\n    --color-border-background: var(--color-1);\n    --color-border-divider-line: var(--color-4);\n\n    --color-tab-selected: var(--color-text);\n    --color-tab-selected-background: var(--color-4);\n    --color-tab-unselected: gray;\n    --color-tab-unselected-background: transparent;\n    --color-tab-textbox: var(--color-text);\n    --color-tab-textbox-background: var(--color-3);\n\n    --color-border-tab-selected: var(--color-text);\n    --color-border-tab-selected-background: var(--color-4);\n    --color-border-tab-unselected: gray;\n    --color-border-tab-unselected-background: var(--color-2);\n\n    --color-splitter: var(--color-2);\n    --color-splitter-hover: var(--color-4);\n    --color-splitter-drag: var(--color-5);\n\n    --color-drag-rect-border: var(--color-4);\n    --color-drag-rect-background: var(--color-1);\n    --color-drag-rect: var(--color-text);\n\n    --color-popup-border: var(--color-6);\n    --color-popup-unselected: var(--color-text);\n    --color-popup-unselected-background: #{$color_background};\n    --color-popup-selected: var(--color-text);\n    --color-popup-selected-background: var(--color-4);\n\n    --color-edge-marker: gray;\n\n\n    --color-underline: rgb(65, 105, 225);\n    --color-underline-hover: #aaa;\n    --underline_height: 3px;\n  }\n}\n    \n@import \"./base.scss\";\n","@import \"./Layout/dark.scss\";\n// @import \"./Layout/light.scss\";\n\n#wpwrap {\n  display: flex;\n  flex-direction: column;\n}\n#wpcontent {\n  padding-left: 0;\n  height: 100%;\n  flex-grow: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n#wpbody-content {\n  padding-bottom: 0;\n  float: none;\n}\n#wpbody {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-grow: 1;\n}\nbody {\n  opacity: 0; background-color: #252a33;\n  #adminmenumain { display: none; }\n}\nbody.ide-loaded {\n  opacity: 1; transition: opacity 100ms;\n  #adminmenumain { display: inherit; }\n}\n\nbody:not(.sticky-menu) {\n  // .sticky-menu #adminmenuwrap{position:fixed}\n  // Without sticky-menu\n\n  #wpwrap {\n    display: flex;\n    flex-direction: row;\n  }\n  #adminmenumain {}\n  #wpcontent {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-grow: 1;\n    margin-left: 0;\n  }\n  #wpbody {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    left: 0;\n  }\n  #wpbody-content {\n    padding-left: 160px;\n  }\n}\n\n@media screen and (max-width: 782px) {\n  #wpbody-content {\n    padding-left: 0 !important;\n  }\n}\n\nhtml.tangible-template-system-builder-expanded {\n  // It needs to be on html element to override html.wp-toolbar\n  padding-top: 0;\n\n  #adminmenumain, #wpadminbar {\n    display: none;\n  }\n  #wpcontent {\n    margin-left: 0;\n  }\n  #wpbody {\n    top: 0;\n  }\n  #wpbody-content {\n    padding-left: 0;\n  }\n}\n\n#tangible-template-system-builder {\n\n  // position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n  \n  background-color: #2e3440;    \n\n  font-size: 16px;\n\n  &, h1, h2, h3, h4,\n  .ide-header--action, .tab-action {\n    color: #eeeeee;\n  }\n\n  .flexlayout__border_left {\n    display: none;\n  }\n\n\n  .ide-header {\n    // font-size: 12px;\n    background-color: #2e3440; // 252a33\n    padding: .25rem .75rem;\n\n    display: flex;\n\n    input[type=\"text\"] {\n      color: inherit;\n      background-color: transparent;\n      border: 0;\n      padding: 0 .5rem;\n      margin-left: -.5rem;\n    }\n  }\n  .ide-header--title {\n    flex-grow: 1;\n  }\n  .ide-header--actions {\n    display: flex;\n    align-items: center;\n  }\n\n\n  .ide-main {\n    position: relative;\n    height: 100%;\n  }\n\n  .ide-component {\n\n    padding: .25rem .5rem;\n\n    & > header, h2 {\n      margin: .25rem 0 1rem;\n      padding: 0;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    p {\n      margin: 1rem 0 1rem;\n      padding: 0;\n    }\n  }\n\n  .ide-header--action, .tab-action {\n\n    font-size: 12px;\n    margin: .125rem;\n    padding: .125rem .5rem;\n\n    color: #eeeeee;\n    background-color: #252a33;\n    \n    transition: background-color .3s;\n    cursor: pointer;\n    \n    border-radius: 4px;\n    border: 1px solid #3b4252;\n\n    &:hover {\n      background-color: #2e3440;    \n    }\n    &:active {\n      background-color: #3b4252;    \n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n\n  .ide-header--action-with-icon {\n    margin-top: 0;\n    margin-bottom: 0;\n    padding: .25rem;\n    svg {\n      width: 16px; height: 16px;\n    }\n  }\n\n  .ide-header--action-separator {\n    display: inline-block;\n    width: 0.5rem;\n  }\n}\n","\n// Base\n\n@mixin tabset_mixin {}\n\n@mixin tabset_tabbar_mixin {}\n\n@mixin tabset_header_mixin {}\n\n@mixin tabset_selected_mixin {}\n\n@mixin tabset_header_mixin {\n  // box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);\n}\n\n@mixin tabset_selected_mixin {\n  // background-image: linear-gradient(var(--color-background), var(--color-4));\n}\n\n@mixin tabset_maximized_mixin {\n  // background-image: linear-gradient(var(--color-6), var(--color-2));\n}\n\n@mixin tab_top_mixin {\n  // box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n  // border-top-left-radius: 3px;\n  // border-top-right-radius: 3px;\n}\n\n@mixin tab_bottom_mixin {\n  // box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n  // border-bottom-left-radius: 3px;\n  // border-bottom-right-radius: 3px;\n}\n\n@mixin tab_button_mixin {\n  padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;\n  // transition-property: color, border-color, background-color;\n  // transition-duration: .3s;\n}\n\n@mixin tab_button_selected_mixin {\n  border-bottom: var(--underline_height) solid  var(--color-underline);\n}\n\n@mixin tab_button_unselected_mixin {\n  // color: gray;\n  border-bottom: var(--underline_height) solid transparent;\n}\n\n@mixin tab_button_hovered_mixin {\n  border-bottom: var(--underline_height) solid  var(--color-underline-hover);\n}\n\n@mixin border_mixin {}\n\n@mixin close_button_hovered_mixin {\n  background-color: var(--color-6);\n}\n\n@mixin toolbar_button_hovered_mixin {\n  background-color: var(--color-4);\n}\n\n@mixin border_button_mixin {\n  // box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);\n  // border-radius: 3px;\n  padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;\n}\n\n@mixin border_button_selected_mixin {\n  border-bottom: var(--underline_height) solid  var(--color-underline);\n}\n\n@mixin border_button_unselected_mixin {\n  border-bottom: var(--underline_height) solid transparent;\n  }\n\n@mixin border_button_hovered_mixin {\n  // background-color: var(--color-4);\n  border-bottom: var(--underline_height) solid  var(--color-underline-hover);\n}\n\n@mixin splitter_mixin {}\n\n@mixin splitter_hover_mixin {}\n\n@mixin splitter_drag_mixin {\n  border-radius: 5px;\n}\n\n@mixin splitter_border_mixin {}\n\n@mixin tabset_tab_divider_mixin {}\n\n@mixin border_tab_divider_mixin {}\n\n@mixin absoluteFill {\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  position: absolute;\n}\n\n.flexlayout {\n  &__layout {\n    @include absoluteFill;\n    overflow: hidden;\n    color: var(--color-text);\n    background-color: var(--color-background);\n  }\n\n  &__splitter {\n    background-color: var(--color-splitter);\n    @include splitter_mixin;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--color-splitter-hover);\n        transition: background-color ease-in .1s;\n        transition-delay: 0.05s;\n        @include splitter_hover_mixin;\n      }\n    }\n\n    &_border {\n      z-index: 10;\n      @include splitter_border_mixin;\n    }\n\n    &_drag {\n      z-index: 1000;\n      background-color: var(--color-splitter-drag);\n      @include splitter_drag_mixin;\n    }\n\n    &_extra {\n      background-color: transparent;\n    }\n  }\n\n  &__outline_rect {\n    position: absolute;\n    pointer-events: none;\n    box-sizing: border-box;\n    border: 2px solid var(--color-drag1);\n    background: var(--color-drag1-background);\n    border-radius: 5px;\n    z-index: 1000;\n\n    &_edge {\n      pointer-events: none;\n      border: 2px solid var(--color-drag2);\n      background: var(--color-drag2-background);\n      border-radius: 5px;\n      z-index: 1000;\n      box-sizing: border-box;\n    }\n  }\n\n  &__edge_rect {\n    position: absolute;\n    z-index: 1000;\n    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);\n    background-color: var(--color-edge-marker);\n    pointer-events: none;\n  }\n\n  &__drag_rect {\n    position: absolute;\n    cursor: move;\n    color: var(--color-drag-rect);\n    background-color: var(--color-drag-rect-background);\n    border: 2px solid var(--color-drag-rect-border);\n    // box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);\n    border-radius: 5px;\n    z-index: 1000;\n    box-sizing: border-box;\n    opacity: 0.9;\n    text-align: center;\n\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0.3em 1em;\n    word-wrap: break-word;\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n  }\n\n  &__tabset {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    background-color: var(--color-tabset-background);\n    box-sizing: border-box;\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n    @include tabset_mixin;\n\n    &_tab_divider {\n      // width: 4px;\n      @include tabset_tab_divider_mixin;\n    }\n\n    &_content {\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      justify-content: center;\n    }\n\n    &_header {\n      // tabset header bar\n      display: flex;\n      align-items: center;\n      padding: 3px 3px 3px 5px;\n      box-sizing: border-box;\n      border-bottom: 1px solid var(--color-tabset-divider-line);\n      color: var(--color-tabset-header);\n      background-color: var(--color-tabset-header-background);\n      @include tabset_header_mixin;\n\n      &_content {\n        flex-grow: 1;\n      }\n    }\n\n    &_tabbar {\n      &_outer {\n        // tabset tabbar outer\n        box-sizing: border-box;\n        background-color: var(--color-tabset-background);\n        overflow: hidden;\n        display: flex;\n        @include tabset_tabbar_mixin;\n      }\n\n      &_outer_top {\n        // border-bottom: 1px solid var(--color-tabset-divider-line);\n      }\n\n      &_outer_bottom {\n        // border-top: 1px solid var(--color-tabset-divider-line);\n      }\n\n      &_inner {\n        // tabset tabbar inner\n        position: relative;\n        box-sizing: border-box;\n        display: flex;\n        flex-grow: 1;\n        overflow: hidden;\n\n        &_tab_container {\n          display: flex;\n          padding-left: 4px;\n          padding-right: 4px;\n          box-sizing: border-box;\n          position: absolute;\n          top: 0;\n          bottom: 0;\n          width: 10000px;\n\n          &_top {\n            // border-top: 2px solid transparent; // if you change this, update the _sizer above\n          }\n\n          &_bottom {\n            // border-bottom: 2px solid transparent;\n          }\n        }\n      }\n    }\n\n    &-selected {\n      background-color: var(--color-tabset-background-selected);\n      @include tabset_selected_mixin;\n    }\n\n    &-maximized {\n      background-color: var(--color-tabset-background-maximized);\n      @include tabset_maximized_mixin;\n    }\n  }\n\n  &__tab_button_stamp {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.3em;\n    white-space: nowrap;\n    box-sizing: border-box;\n  }\n\n  &__tab {\n    overflow: auto;\n    position: absolute;\n    box-sizing: border-box;\n    background-color: var(--color-background);\n    color: var(--color-text);\n\n    &_button {\n      display: flex;\n      gap: 0.3em;\n      align-items: center;\n      box-sizing: border-box;\n      padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above\n\n      cursor: pointer;\n      @include tab_button_mixin;\n\n      &--unselected {\n        // background-color: var(--color-tab-unselected-background);\n        color: var(--color-tab-unselected);\n        @include tab_button_unselected_mixin;\n\n      }\n\n      &--selected, &:hover, &:active {\n        background-color: var(--color-tab-selected-background);\n        color: var(--color-tab-selected);\n        @include tab_button_selected_mixin;\n      }\n\n      &_top {\n        @include tab_top_mixin;\n      }\n\n      &_bottom {\n        @include tab_bottom_mixin;\n      }\n\n      &_leading {\n        display: flex;\n      }\n\n      &_content {\n        display: flex;\n      }\n\n      &_textbox {\n        border: none;\n        font-family: var(--font-family);\n        font-size: var(--font-size);\n        color: var(--color-tab-textbox);\n        background-color: var(--color-tab-textbox-background);\n        border: 1px inset var(--color-1);\n        border-radius: 3px;\n        width: 10em;\n      }\n\n      &_textbox:focus {\n        outline: none;\n      }\n\n      &_trailing {\n        display: flex;\n        visibility: hidden;\n        border-radius: 4px;\n\n        &:hover {\n          @include close_button_hovered_mixin;\n        }\n      }\n\n      @media (pointer: coarse) {\n        &_trailing {}\n      }\n\n      @media (hover: hover) {\n        &:hover &_trailing {\n          visibility: visible;\n        }\n      }\n\n      &--selected &_trailing {\n        visibility: visible;\n      }\n\n      &_overflow {\n        display: flex;\n        align-items: center;\n        border: none;\n        color: var(--color-overflow);\n        font-size: inherit;\n        background-color: transparent;\n      }\n    }\n\n    &_toolbar {\n      display: flex;\n      align-items: center;\n      gap: .3em;\n      padding-left: .5em;\n      padding-right: .3em;\n\n      &_button {\n        border: none;\n        outline: none;\n        font-size: inherit;\n        margin: 0px;\n        background-color: transparent;\n        border-radius: 4px;\n        padding: 1px;\n\n        @media (hover: hover) {\n          &:hover {\n            @include toolbar_button_hovered_mixin;\n          }\n        }\n\n        &-min {}\n\n        &-max {}\n\n        &-float {}\n\n        &-close {}\n      }\n\n      &_sticky_buttons_container {\n        display: flex;\n        gap: 0.3em;\n        padding-left: 5px;\n        align-items: center;\n      }\n    }\n\n    &_floating {\n      overflow: auto;\n      position: absolute;\n      box-sizing: border-box;\n      color: var(--color-text);\n      background-color: var(--color-background);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      &_inner {\n        overflow: auto;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n      }\n\n      &_inner div {\n        margin-bottom: 5px;\n        text-align: center;\n      }\n\n      &_inner div a {\n        color: royalblue;\n      }\n    }\n  }\n\n  &__border {\n    box-sizing: border-box;\n    overflow: hidden;\n    display: flex;\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n    color: var(--color-border);\n    background-color: var(--color-border-background);\n    @include border_mixin;\n\n    &_top {\n      border-bottom: 1px solid var(--color-border-divider-line);\n      align-items: center;\n    }\n\n    &_bottom {\n      border-top: 1px solid var(--color-border-divider-line);\n      align-items: center;\n    }\n\n    &_left {\n      border-right: 1px solid var(--color-border-divider-line);\n      align-content: center;\n      flex-direction: column;\n    }\n\n    &_right {\n      border-left: 1px solid var(--color-border-divider-line);\n      align-content: center;\n      flex-direction: column;\n    }\n\n    &_inner {\n      position: relative;\n      box-sizing: border-box;\n      display: flex;\n      overflow: hidden;\n      flex-grow: 1;\n\n      &_tab_container {\n        white-space: nowrap;\n        display: flex;\n        padding-left: 2px;\n        padding-right: 2px;\n        box-sizing: border-box;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 10000px;\n\n        &_right {\n          transform-origin: top left;\n          transform: rotate(90deg);\n        }\n\n        &_left {\n          flex-direction: row-reverse;\n          transform-origin: top right;\n          transform: rotate(-90deg);\n        }\n      }\n    }\n\n    &_tab_divider {\n      width: 4px;\n      @include border_tab_divider_mixin;\n    }\n\n    &_button {\n      display: flex;\n      gap: 0.3em;\n      align-items: center;\n      cursor: pointer;\n      padding: 3px 0.5em;\n      margin: 2px 0px;\n      box-sizing: border-box;\n      white-space: nowrap;\n      @include border_button_mixin;\n\n      &--selected {\n        background-color: var(--color-border-tab-selected-background);\n        color: var(--color-border-tab-selected);\n        @include border_button_selected_mixin;\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--color-border-tab-selected-background);\n          color: var(--color-border-tab-selected);\n          @include border_button_hovered_mixin;\n        }\n      }\n\n      &--unselected {\n        background-color: var(--color-border-tab-unselected-background);\n        color: var(--color-border-tab-unselected);\n        @include border_button_unselected_mixin;\n      }\n\n      &_leading {\n        display: flex;\n      }\n\n      &_content {\n        display: flex;\n      }\n\n      &_trailing {\n        display: flex;\n        border-radius: 4px;\n        visibility: hidden;\n\n        &:hover {\n          @include close_button_hovered_mixin;\n        }\n      }\n\n      @media (pointer: coarse) {\n        &_trailing {}\n      }\n\n      @media (hover: hover) {\n        &:hover &_trailing {\n          visibility: visible;\n        }\n      }\n\n      &--selected &_trailing {\n        visibility: visible;\n      }\n    }\n\n    &_toolbar {\n      display: flex;\n      gap: .3em;\n      align-items: center;\n\n      &_left,\n      &_right {\n        flex-direction: column;\n        padding-top: .5em;\n        padding-bottom: .3em;\n      }\n\n      &_top,\n      &_bottom {\n        padding-left: .5em;\n        padding-right: .3em;\n      }\n\n      &_button {\n        border: none;\n        outline: none;\n        font-size: inherit;\n        background-color: transparent;\n        border-radius: 4px;\n        padding: 1px;\n\n        @media (hover: hover) {\n          &:hover {\n            @include toolbar_button_hovered_mixin;\n          }\n        }\n\n        &-float {}\n\n        &_overflow {\n          display: flex;\n          align-items: center;\n          border: none;\n          color: var(--color-overflow);\n          font-size: inherit;\n          background-color: transparent;\n        }\n\n        &_overflow_top,\n        &_overflow_bottom {}\n\n        &_overflow_right,\n        &_overflow_left {}\n      }\n    }\n  }\n\n  &__popup_menu {\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n\n    &_item {\n      padding: 2px 0.5em;\n      white-space: nowrap;\n      cursor: pointer;\n      border-radius: 2px;\n    }\n\n    @media (hover: hover) {\n      &_item:hover {\n        background-color: var(--color-6);\n      }\n    }\n\n    &_container {\n      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n      border: 1px solid var(--color-popup-border);\n      color: var(--color-popup-unselected);\n      background: var(--color-popup-unselected-background);\n      border-radius: 3px;\n      position: absolute;\n      z-index: 1000;\n      max-height: 50%;\n      min-width: 100px;\n      overflow: auto;\n      padding: 2px;\n    }\n  }\n\n  &__floating_window {\n    _body {\n      height: 100%;\n    }\n\n    &_content {\n      @include absoluteFill;\n    }\n\n    &_tab {\n      overflow: auto;\n      @include absoluteFill;\n\n      box-sizing: border-box;\n      background-color: var(--color-background);\n      color: var(--color-text);\n    }\n  }\n\n  &__error_boundary_container {\n    @include absoluteFill;\n    display: flex;\n    justify-content: center;\n  }\n\n  &__error_boundary_content {\n    display: flex;\n    align-items: center;\n  }\n\n  // These classes are used to measure the sizes for tab header bar, tab bar and border bars,\n  // only the height is used, the padding should match the vertical spacing (padding & margins)\n  // that have been used in the above classes\n\n  &__tabset_sizer {\n    padding-top: 5px; // tab_button has 3 padding top, tabset header inner has 2 border\n    padding-bottom: 3px; // tab_button has 3 padding bottom\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n  }\n\n  &__tabset_header_sizer {\n    padding-top: 3px;\n    padding-bottom: 3px;\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n  }\n\n  &__border_sizer {\n    padding-top: 6px;\n    padding-bottom: 5px;\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n  }\n}\n"]}