{"version":3,"file":"brackets-viewer.min.css","mappings":"AAEA,iBAEE,2BACA,gCACA,8CACA,sBACA,qBACA,sBACA,oBACA,sBACA,2BACA,wBACA,8BACA,yCAGA,kBACA,qBACA,qBACA,gCACA,8BACA,8BACA,0BACA,6BACA,8BAGF,iBAME,uLASA,qCACA,wBACA,2BACA,gBACA,aACA,sBACA,uBACA,cACA,gEACA,cACA,kBAfA,uBAEE,aAeF,sEAGE,sBAGF,4DAGE,mBACA,gBACA,gBAGF,oBACE,cACA,gBACA,mBAGF,oBACE,gBAGF,oBACE,kBACA,uCACA,gBACA,iBACA,mBACA,gBACA,uBACA,yBAGF,8BACE,aACA,eACA,uBACA,aAEA,iCACE,gBAGF,iCACE,kBAIA,wDACE,iCAGF,wCACE,kBAGF,2CACE,cACA,qBACA,cACA,yBAGF,wCACE,mBACA,iBACA,YACA,iEA5FS,CA+FX,8CACE,uCAGF,gFAEE,YAIA,4GAEE,wBACA,gBAKN,qCACE,yCACA,cAKF,6BACE,gBACA,WAGF,kCACE,aAEA,qDACE,mBAGF,yCACE,aACA,sBAEA,4DACE,iCAMR,wBACE,OACA,aACA,mBACA,cACA,yBACA,kBAGE,4CACE,WACA,cACA,kBACA,qCACA,kCACA,WACA,uEAjKa,CAoKf,6DACE,QACA,qEAtKa,CAyKf,8DACE,MACA,wEA3Ka,CA8Kf,qDACE,0BACA,mCACA,MACA,wEAlLa,CAmLb,iBACA,mBAKN,4BACE,WACA,kBACA,0DA1La,CA2Lb,yCACA,mCAEA,kCACE,2CAGF,6CACE,8CAGF,iCACE,kBACA,UACA,eACA,cACA,yBACA,qCACA,kBAIF,gDACE,SAIF,gDACE,UAIA,qDACE,WACA,cACA,kBACA,oCACA,kCACA,WACA,wEApOa,CAuOf,mOACE,kBACA,yBACA,0BAGF,sFACE,cAWF,qFACE,cAKN,8BACE,aACA,8BACA,4CACA,mCAEA,oCACE,kDAGF,6CACE,mBACA,kDACA,mDACA,0CAGF,6CACE,gBACA,qDACA,sDACA,6CAGF,oCACE,mBACA,gBACA,uBACA,UAGA,yCACE,wBAGF,wCACE,oCACA,qCACA,iBACA,qCACA,kBACA,sBACA,kBACA,WAIF,4CACE,wBACA,eACA,oBAIJ,sCACE,iBACA,UACA,kBAGF,wCACE,iBAGF,0CACE,uBAGF,2CACE,wBAIJ,2BACE,yBAEA,8BACE,gBACA,mBAGF,qDACE,mB","sources":["webpack://@ewanmellor/brackets-viewer/./src/style.scss"],"sourcesContent":["// Default integrated theme.\n\n.brackets-viewer {\n  /* Colors */\n  --primary-background: #fff;\n  --secondary-background: #eceff1;\n  --match-background: var(--primary-background);\n  --font-color: #212529;\n  --win-color: #50b649;\n  --loss-color: #e61a1a;\n  --label-color: grey;\n  --hint-color: #a7a7a7;\n  --connector-color: #9e9e9e;\n  --border-color: #d9d9d9;\n  --border-hover-color: #b6b5b5;\n  --border-selected-color: rgb(60, 60, 60);\n\n  /* Sizes */\n  --text-size: 12px;\n  --round-margin: 40px;\n  --match-width: 150px;\n  --match-horizontal-padding: 8px;\n  --match-vertical-padding: 6px;\n  --connector-border-width: 2px;\n  --match-border-width: 1px;\n  --match-border-radius: 0.3em;\n  --participant-image-size: 1em;\n}\n\n.brackets-viewer {\n  $connector-width: var(--round-margin) / 2;\n  $connector-border: var(--connector-border-width) solid var(--connector-color);\n\n  $match-border: var(--match-border-width) solid var(--border-color);\n\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\",\n    \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n\n  &:empty {\n    // Prevents a FOUC during loading.\n    display: none;\n  }\n\n  background: var(--primary-background);\n  color: var(--font-color);\n  font-size: var(--text-size);\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  overflow: auto;\n  user-select: none;\n  margin: 0 auto;\n  padding: 10px 50px;\n\n  *,\n  ::after,\n  ::before {\n    box-sizing: border-box;\n  }\n\n  h1,\n  h2,\n  h3 {\n    margin-bottom: 0.5em;\n    font-weight: 500;\n    line-height: 1.2;\n  }\n\n  h1 {\n    font-size: 2em;\n    margin-top: 30px;\n    margin-bottom: 20px;\n  }\n\n  h2 {\n    font-size: 1.7em;\n  }\n\n  h3 {\n    text-align: center;\n    background: var(--secondary-background);\n    font-size: 1.1em;\n    padding: 10px 0px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: var(--match-width);\n  }\n\n  .round-robin {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    row-gap: 24px;\n\n    h1 {\n      flex-basis: 100%;\n    }\n\n    h2 {\n      text-align: center;\n    }\n\n    .group {\n      &:not(:last-of-type) {\n        margin-right: var(--round-margin);\n      }\n\n      h2 {\n        margin: 0 0 25px 0;\n      }\n\n      table {\n        font-size: 1em;\n        margin: 30px 0 20px 0;\n        color: #a7a7a7;\n        border-collapse: collapse;\n      }\n\n      th {\n        font-weight: normal;\n        text-align: start;\n        cursor: help;\n        border-bottom: $match-border;\n      }\n\n      td.hover {\n        background: var(--secondary-background);\n      }\n\n      th,\n      td {\n        padding: 5px;\n      }\n\n      td {\n        &:nth-of-type(2),\n        &:last-of-type {\n          color: var(--font-color);\n          font-weight: 500;\n        }\n      }\n    }\n\n    .round {\n      width: fit-content;\n      margin: 0 auto;\n    }\n  }\n\n  .bracket {\n    h2 {\n      font-size: 1.5em;\n      color: gray;\n    }\n\n    .rounds {\n      display: flex;\n\n      &:not(:last-of-type) {\n        margin-bottom: 15px;\n      }\n\n      .round {\n        display: flex;\n        flex-direction: column;\n\n        &:not(:last-of-type) {\n          margin-right: var(--round-margin);\n        }\n      }\n    }\n  }\n\n  .match {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    margin: 10px 0;\n    width: var(--match-width);\n    position: relative;\n\n    &.connect-next {\n      &::after {\n        content: \"\";\n        display: block;\n        position: absolute;\n        right: calc(-1 * #{$connector-width});\n        width: calc(#{$connector-width});\n        height: 50%;\n        border-right: $connector-border;\n      }\n\n      &:nth-of-type(odd)::after {\n        top: 50%;\n        border-top: $connector-border;\n      }\n\n      &:nth-of-type(even)::after {\n        top: 0;\n        border-bottom: $connector-border;\n      }\n\n      &.straight::after {\n        width: var(--round-margin);\n        right: calc(-1 * var(--round-margin));\n        top: 0;\n        border-bottom: $connector-border;\n        border-top: unset;\n        border-right: unset;\n      }\n    }\n  }\n\n  .opponents {\n    width: 100%;\n    position: relative;\n    border: $match-border;\n    border-radius: var(--match-border-radius);\n    background: var(--match-background);\n\n    &:hover {\n      border: 1px solid var(--border-hover-color);\n    }\n\n    &.popover-selected {\n      border: 1px solid var(--border-selected-color);\n    }\n\n    & > span {\n      position: absolute;\n      top: -10px;\n      font-size: 0.8em;\n      padding: 0 5px;\n      color: var(--label-color);\n      background: var(--primary-background);\n      border-radius: 3px;\n    }\n\n    // Match hint (e.g. WB 1.1)\n    & > span:nth-of-type(1) {\n      left: 3px;\n    }\n\n    // Child count label (e.g. Bo3)\n    & > span:nth-of-type(2) {\n      right: 3px;\n    }\n\n    &.connect-previous {\n      &::before {\n        content: \"\";\n        display: block;\n        position: absolute;\n        left: calc(-1 * #{$connector-width});\n        width: calc(#{$connector-width});\n        height: 50%;\n        border-bottom: $connector-border;\n      }\n\n      %straight {\n        border-left: unset;\n        left: var(--round-margin);\n        width: var(--round-margin);\n      }\n\n      .bracket:nth-of-type(1) &.straight::before {\n        content: unset;\n      }\n\n      .bracket:nth-of-type(1) &.straight::after {\n        @extend %straight;\n      }\n\n      .bracket:nth-of-type(2) &.straight::before {\n        @extend %straight;\n      }\n\n      .bracket:nth-of-type(2) &.straight::after {\n        content: unset;\n      }\n    }\n  }\n\n  .participant {\n    display: flex;\n    justify-content: space-between;\n    padding: 2px var(--match-horizontal-padding);\n    background: var(--match-background);\n\n    &.hover {\n      background: var(--secondary-background) !important;\n    }\n\n    &:nth-of-type(1) {\n      border-bottom: none;\n      border-top-left-radius: var(--match-border-radius);\n      border-top-right-radius: var(--match-border-radius);\n      padding-top: var(--match-vertical-padding);\n    }\n\n    &:nth-of-type(2) {\n      border-top: none;\n      border-bottom-left-radius: var(--match-border-radius);\n      border-bottom-right-radius: var(--match-border-radius);\n      padding-bottom: var(--match-vertical-padding);\n    }\n\n    .name {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: 80%;\n\n      // Participant origin hint (e.g. #1)\n      &.hint {\n        color: var(--hint-color);\n      }\n\n      & > img {\n        width: var(--participant-image-size);\n        height: var(--participant-image-size);\n        margin-right: 4px;\n        object-fit: cover;\n        border-radius: 4px;\n        vertical-align: middle;\n        position: relative;\n        bottom: 1px;\n      }\n\n      // Participant name\n      & > .origin {\n        color: var(--hint-color);\n        font-size: 0.9em;\n        font-weight: initial;\n      }\n    }\n\n    .result {\n      margin-left: 10px;\n      width: 15%;\n      text-align: center;\n    }\n\n    &.win .name {\n      font-weight: bold;\n    }\n\n    &.win .result {\n      color: var(--win-color);\n    }\n\n    &.loss .result {\n      color: var(--loss-color);\n    }\n  }\n\n  [popover] {\n    padding: 0 14px 10px 14px;\n\n    h4 {\n      font-size: 1.1em;\n      margin-bottom: 24px;\n    }\n\n    .match:not(:last-of-type) {\n      margin-bottom: 20px;\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}