{"version":3,"file":"static/css/732.54ca2c41.chunk.css","mappings":"AAEA,WACE,2CACA,8CACA,aACA,8BACA,eACA,wCACA,MACA,UAEA,gCACE,yBAIJ,UACE,mFAGA,2CACA,aACA,uBACA,0BACA,8BACA,aACA,wBAVF,UAWI,+BAGF,iBACE,uCACA,iCACA,6CACA,YACA,4CACA,UAEA,sBACE,aACA,sBACA,eACA,wCACA,SACA,gBACA,uBACA,cACA,8BAEA,2CACE,0BAGF,8BACE,aACA,sBAEA,2CACE,kBACA,gBAGF,mCACE,yCAGF,sCACE,kBACA,sBAEA,mDACE,YACA,mBAIJ,8CACE,oCAAqC,CACrC,6CACA,uCACA,iCACA,cACA,kBAEA,8DACE,uBACA,gBAKN,oCACE,kBACA,YACA,UACA,4CAGF,+BACE,aACA,UACA,uBAKF,oCACE,YACA,gBACA,WAGF,oCACE,yBAMJ,0BACE,aACA,sBACA,SACA,gDAEA,gCACE,uCACA,aACA,eACA,UACA,cAEA,mCACE,oBACA,eACA,cACA,yBAGF,wCACE,kBAGF,qCACE,aACA,eACA,UACA,yBAEA,kBAEA,4CACE,0BAEA,qDACE,mBAGF,gDACE,sCAAuC,CAM/C,mDACE,8BAA+B,CAC/B,+BAAgC,CAChC,gCAAiC,CAEjC,6CACA,qEACA,SACA,uCACA,WAGA,oEACE,iBAGF,yDACE,YAGF,8EACE,2BAGF,2DACE,eACA,qCAGF,+DACE,qHAIA,iBAKN,0BACE,mBACA,aACA,sBACA,cAEA,8CACE,oBACA,uBACA,eACA,kBACA,SACA,0BAEA,oDACE,qBAIJ,sCACE,uCACA,YACA,WAGF,wCACE,aACA,sBACA,kBACA,SACA,WAEA,6CACE,+CACA,gBACA,kBACA,WAGF,qDACE,+CACA,YACA,gBACA,cACA,WCvPV,cACE,mBACA,2CACA,2CACA,aACA,eACA,SACA,aAEA,yBACE,0BACA,kBACA,+BACA,0BACA,iCACA,2BAGF,8BACE,mBACA,eACA,SACA,gBACA","sources":["playground/index.scss","plus/common/login-banner.scss"],"sourcesContent":["@use \"../ui/vars\" as *;\n\n.play-menu {\n  background-color: var(--background-primary);\n  border-bottom: 1px solid var(--border-primary);\n  display: flex;\n  justify-content: space-between;\n  padding: 0 1rem;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n\n  .top-navigation-main {\n    justify-content: flex-end;\n  }\n}\n\nmain.play {\n  --play-height: calc(\n    100vh - var(--top-nav-height) - var(--top-banner-outer-height)\n  );\n  background-color: var(--background-primary);\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: 1fr;\n  min-height: var(--play-height);\n  padding: 1rem;\n  @media (min-width: $screen-md) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  dialog {\n    border: 1px solid var(--border-primary);\n    border-radius: var(--elem-radius);\n    box-shadow: 1px 1px 2px var(--border-primary);\n    margin: auto;\n    width: fit-content;\n    z-index: 1;\n\n    > form {\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      font-size: var(--type-smaller-font-size);\n      gap: 2rem;\n      max-width: 30rem;\n      overflow-wrap: anywhere;\n      padding: 0.5rem;\n      width: min(calc(100vw - 5rem), 25rem);\n\n      a:hover:not(.button) {\n        text-decoration: underline;\n      }\n\n      > section {\n        display: flex;\n        flex-direction: column;\n\n        &#share-link > a {\n          align-self: center;\n          margin-top: 1rem;\n        }\n\n        > span {\n          font-size: var(--type-base-font-size-rem);\n        }\n\n        .button {\n          margin: 0.5rem auto;\n          width: min(100%, 15rem);\n\n          .button-wrap {\n            height: initial;\n            padding: 0.5rem 1rem;\n          }\n        }\n\n        .share-get-plus {\n          --text-link: var(--plus-accent-color);\n          background-color: var(--background-secondary);\n          border: 1px solid var(--border-primary);\n          border-radius: var(--elem-radius);\n          padding: 0.5rem;\n          text-align: center;\n\n          .auth-container {\n            justify-content: center;\n            margin-top: 1rem;\n          }\n        }\n      }\n\n      #share-cancel {\n        position: absolute;\n        right: 0.5rem;\n        top: 0.5rem;\n        width: fit-content;\n      }\n\n      .buttons {\n        display: flex;\n        gap: 0.5rem;\n        justify-content: center;\n      }\n    }\n\n    > form.flag {\n      > textarea {\n        height: 6rem;\n        resize: vertical;\n        width: 100%;\n      }\n\n      > .buttons {\n        justify-content: flex-end;\n      }\n    }\n  }\n\n  section {\n    &.editors {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      max-height: max(calc(var(--play-height) - 2rem), 30rem);\n\n      aside {\n        border: 1px solid var(--border-primary);\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem;\n        padding: 0.5rem;\n\n        h1 {\n          display: inline-flex;\n          font-size: 1rem;\n          margin: auto 0;\n          text-transform: uppercase;\n        }\n\n        .switch {\n          font-size: smaller;\n        }\n\n        menu {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 0.5rem;\n          justify-content: flex-end;\n          margin: 0;\n          margin-left: auto;\n\n          button {\n            text-transform: capitalize;\n\n            &:disabled {\n              cursor: not-allowed;\n            }\n\n            &.red {\n              --button-color: var(--text-primary-red);\n            }\n          }\n        }\n      }\n\n      details.editor-container {\n        --editor-header-height: 2.25rem;\n        --editor-header-padding: 0.25rem;\n        --editor-header-border-width: 1px;\n\n        background-color: var(--background-secondary);\n        border: var(--editor-header-border-width) solid var(--border-primary);\n        height: 0;\n        min-height: var(--editor-header-height);\n        width: 100%;\n\n        /* stylelint-disable-next-line selector-pseudo-element-no-unknown */\n        &::details-content {\n          display: contents;\n        }\n\n        &[open] {\n          height: 100%;\n        }\n\n        &:not(:focus-within) summary {\n          color: var(--text-inactive);\n        }\n\n        summary {\n          cursor: pointer;\n          padding: var(--editor-header-padding);\n        }\n\n        play-editor {\n          height: calc(\n            100% - var(--editor-header-height) - 2 *\n              var(--editor-header-padding) - var(--editor-header-border-width)\n          );\n          margin: 0.5rem 0 0;\n        }\n      }\n    }\n\n    &.preview {\n      align-items: center;\n      display: flex;\n      flex-direction: column;\n      overflow: auto;\n\n      button.flag-example {\n        align-self: flex-end;\n        color: var(--text-link);\n        cursor: pointer;\n        font-size: smaller;\n        margin: 0;\n        text-decoration: underline;\n\n        &:hover {\n          text-decoration: none;\n        }\n      }\n\n      play-runner {\n        border: 1px solid var(--border-primary);\n        height: 100%;\n        width: 100%;\n      }\n\n      #play-console {\n        display: flex;\n        flex-direction: column;\n        font-size: smaller;\n        margin: 0;\n        width: 100%;\n\n        > span {\n          background-color: var(--code-background-inline);\n          font-weight: 600;\n          text-align: center;\n          width: 100%;\n        }\n\n        play-console {\n          background-color: var(--code-background-inline);\n          height: 6rem;\n          max-height: 6rem;\n          overflow: auto;\n          width: 100%;\n        }\n      }\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.login-banner {\n  align-items: center;\n  background-color: var(--background-success);\n  border: 2px solid var(--background-success);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  padding: 1rem;\n\n  .plus-link {\n    color: var(--text-primary);\n    font-style: normal;\n    font-variation-settings: normal;\n    text-decoration: underline;\n    text-decoration-thickness: 0.15rem;\n    text-underline-offset: 0.1em;\n  }\n\n  .auth-container {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-bottom: 0;\n    margin-left: auto;\n  }\n}\n"],"names":[],"sourceRoot":""}