{"version":3,"sources":["/Users/melvinvalster/Projects/talent-calculator/src/App.scss","/Users/melvinvalster/Projects/talent-calculator/src/sass/_config.scss","/Users/melvinvalster/Projects/talent-calculator/src/components/TalentSlot.scss","/Users/melvinvalster/Projects/talent-calculator/src/components/Icon.scss","/Users/melvinvalster/Projects/talent-calculator/src/components/Arrow.scss","/Users/melvinvalster/Projects/talent-calculator/src/components/ClassPicker.scss","/Users/melvinvalster/Projects/talent-calculator/src/components/Playground.scss","/Users/melvinvalster/Projects/talent-calculator/src/components/Tooltip.scss"],"names":[],"mappings":"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","file":"main.508deaed.chunk.css","sourcesContent":["@import \"sass/config\";\n\nbody {\n  color: white;\n  background-color: #111;\n  font-family: Verdana;\n  margin: 0;\n}\n\n// Normalize etc.\nul {\n  margin: 0;\n}\n\na {\n  text-decoration: none;\n  color: pink;\n\n  &:hover {\n    color: lighten(pink, 50%);\n  }\n}\n\n.container {\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.inline-items {\n  display: flex;\n\n  & > * {\n    margin-right: 1em;\n  }\n}\n\n.yellow { color: $color-yellow; }\n.green { color: $quality-2; }\n\n.tight {\n  margin-bottom: 0;\n\n  & + p {\n    margin-top: 0;\n  }\n}\n\n.calculator {\n  &__points {\n    color: white;\n    text-align: center;\n  }\n}\n\n.trees {\n  display: flex;\n  justify-content: center;\n}\n\n.tree {\n  position: relative;\n  min-width: 300px;  \n  color: white;\n  margin-right: 1em;\n  background-color: #111;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &__header {\n    text-align: center;\n\n    h3 {\n      margin-top: .75em;\n      margin-bottom: .75em;\n    }\n  }\n\n  &__body {\n    position: relative;\n    height: 520px;\n    border: 1px solid black;\n    background-size: cover;\n    background-position: center;\n  }\n}\n\n.index {\n  min-height: 85vh;\n}\n\n.index__class-picker {\n  margin: 2em 0;\n}\n\nfooter {\n  padding: 2em;\n  font-size: 12px;\n  text-align: center;\n}","$icon-size: 40px;\n\n$row-offset: 30px;\n$row-distance: $icon-size + $row-offset;\n\n$col-offset: 44px;\n$col-gutter: 16px;\n$col-distance: $icon-size + $col-gutter;\n\n// Item quality colours\n$quality-0: #9d9d9d;\n$quality-1: #fff;\n$quality-2: #1eff00;\n$quality-3: #0070dd;\n$quality-4: #a335ee;\n$quality-5: #ff8000;\n\n// Class colours\n$color-warrior: #c69b6d;\n$color-paladin: #f48cba;\n$color-hunter: #aad372;\n$color-rogue: #fff468;\n$color-priest: #fff;\n$color-shaman: #2359ff;\n$color-mage: #68ccef;\n$color-warlock: #9382c9;\n$color-druid: #ff7c0a;\n\n// Colours used in app\n$color-yellow: #ffd100;\n$color-green: $quality-2;\n$color-dark-green: #40bf40;\n$color-subtle: $quality-0;\n$color-icon-overlay: #6396d6;\n\n$color-description: $color-yellow;\n\n@keyframes fadeIn {\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n} ","@import \"../sass/config\";\n\n.talent {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  border-radius: 5px;\n  transition: filter .1s linear;\n  filter: none;\n  cursor: pointer;\n\n  &--available {\n    .talent__status::after {\n      // background-color: rgba($color-green, .8);\n      box-shadow: inset 0px 0px 6px 3px rgba($color-green, .8);\n    }\n\n    .point-label {\n      color: $color-green;\n    }\n  }\n\n  &--maxed {\n    .talent__status::after {\n      box-shadow: inset 0px 0px 6px 3px rgba($color-yellow, .8);\n    }\n\n    .point-label {\n      color: $color-yellow;\n    }\n  }\n\n  &--disabled {\n    filter: grayscale(100%);\n\n    .talent__status { \n      opacity: .7;\n    }\n  }\n\n  // Rows\n  @for $i from 0 through 6 {\n    &[data-row=\"#{$i}\"] {\n      top: $row-offset + (($i) * $row-distance);\n    }\n  }\n\n  // Columns\n  @for $i from 0 through 3 {\n    &[data-col=\"#{$i}\"] { \n      left: $col-offset + ($col-distance * $i); \n    }\n  }\n\n  &__status {\n    position: absolute;\n    width: 48px;\n    height: 46px;\n    bottom: -1px;\n    left: -4px;\n    background-image: url('../images/icons/large/default.png');\n    background-size: cover;\n\n    &:after {\n      content: '';\n      position: absolute;\n      width: 44px;\n      height: 44px;\n      top: 2px;\n      left: 2px;\n      border-radius: 5px;\n    }\n  }\n}\n\n.point-label {\n  position: absolute;\n  bottom: -5px;\n  right: -5px;\n  min-width: 7px;\n  text-align: center;\n  padding: 1px 3px;\n  color: #999;\n  font-size: 11px;\n  font-family: Arial, Helvetica, sans-serif;\n  background: #111;\n  border-radius: 4px;\n  user-select: none;\n\n  &--enabled {\n    color: white;\n  }\n}","@import \"../sass/_config\";\n\n@mixin icon-size($size) {\n  $offset: $size * 0.1;\n\n  width: $size;\n  height: $size;\n\n  .icon__bg {\n    width: ceil($size - $offset);\n    height: ceil($size - $offset);\n    border-radius: $size / 8;\n    top: $size * 0.05;\n    left: $size * 0.05;\n  }\n\n  .icon__frame {\n    width: $size + $offset;\n    height: $size + $offset;\n    top: -($offset * .5);\n    left: -($offset * .5);\n  }\n}\n\n.icon {\n  position: relative;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-color: #222;\n  border-radius: 5px;\n  \n  &:hover {\n    .icon__bg {\n      box-shadow: inset 0px 0px 6px 3px rgba($color-icon-overlay, .8);\n    }\n  }\n\n  &:active {\n    .icon__bg {\n      box-shadow: inset 0px 0px 6px 3px rgba(lighten($color-icon-overlay, 20%), .8);\n    }\n  }\n\n  &--small {\n    @include icon-size(20px);\n  }\n\n  &--medium {\n    @include icon-size(40px);\n  }\n\n  &--large {\n    @include icon-size(60px);\n  }\n\n  &--golden {\n    .icon__frame {\n      background-image: url('../images/icons/large/gold.png');\n    }\n  }\n\n  &--loaded {\n    .icon__bg {\n      opacity: 1;\n    }\n\n    &.icon--fade-in .icon__bg {\n      animation: fadeIn .1s forwards;\n    }\n  }\n\n  &__bg {\n    position: absolute;\n    background-size: cover;\n    opacity: 0;\n  }\n\n  &__frame {\n    position: absolute;\n    background-image: url('../images/icons/large/default.png');\n    background-repeat: no-repeat;\n    background-size: contain;\n  }\n}\n\n","@import \"../sass/config\";\n\n@function baseRowTopOffset($row) {\n  @return $row-offset + ($row * $row-distance);\n}\n\n@function calcLeftOffset($col) {\n  @return $col-offset + ($col-gutter * ($col - 1)) + $icon-size;\n}\n\n@function calcRightOffset($col) {\n  @return $col-offset + ($col-distance * $col) + $icon-size;\n}\n\n@function calcArrowHeight($length) {\n  @return 2px + ($row-offset * $length) + ($icon-size * ($length - 1));\n}\n\n@mixin arrow-left {\n  background-image: url('../images/arrows/left.png');\n  background-position: center left;\n\n  &.arrow--active {\n    background-image: url('../images/arrows/left-active.png');\n  }\n\n  // Cols\n  @for $i from 0 through 3 {\n    &[data-col=\"#{$i}\"] { \n      left: -3px + calcLeftOffset($i);\n    }\n  }\n}\n\n@mixin arrow-right {\n  background-image: url('../images/arrows/right.png');\n  background-position: center right;\n\n  &.arrow--active {\n    background-image: url('../images/arrows/right-active.png');\n  }\n\n  // Cols\n  @for $i from 0 through 3 {\n    &[data-col=\"#{$i}\"] { \n      left: 3px + calcRightOffset($i);\n    }\n  }\n}\n\n.arrow {\n  $arrow-width: 15px;\n  position: absolute;\n\n  &--right,\n  &--left {\n    height: $arrow-width;\n\n    // Rows\n    @for $i from 0 through 6 {\n      &[data-row=\"#{$i}\"] {\n        top: 12px + baseRowTopOffset($i);\n      }\n    }\n\n    // Lengths\n    @for $i from 0 through 3 {\n      &[data-length=\"#{$i}\"] { \n        width: 1px + ($col-gutter * $i) + ($icon-size * ($i - 1));\n      }\n    }\n  }\n\n  &--right {\n    @include arrow-right()\n  }\n\n  &--left {\n    @include arrow-left()\n  }\n\n  &--down {\n    width: $arrow-width;\n    background-image: url('../images/arrows/down.png');\n    background-position: center bottom;\n\n    &.arrow--active {\n      background-image: url('../images/arrows/down-active.png');\n    }\n\n    // Rows\n    @for $i from 0 through 6 {\n      &[data-row=\"#{$i}\"] {\n        top: $icon-size + baseRowTopOffset($i);\n      }\n    }\n\n    // Cols\n    @for $i from 0 through 3 {\n      &[data-col=\"#{$i}\"] { \n        left: 5px + $col-offset + ($col-distance * $i) + floor($arrow-width / 2); \n      }\n    }\n\n    // Lengths\n    @for $i from 0 through 3 {\n      &[data-length=\"#{$i}\"] { \n        height: calcArrowHeight($i);\n      }\n    }\n  }\n\n  &--side-down {\n    // Position based on row\n    @for $i from 0 through 6 {\n      &[data-row=\"#{$i}\"] {\n        top: 12px + baseRowTopOffset($i);\n\n        &:after {\n          top: $arrow-width;\n        }\n      }\n    }\n\n    // Width\n    @for $i from 0 through 3 {\n      &[data-width=\"#{$i}\"] {\n        width: 2px + ($icon-size * $i);\n      }\n    }\n\n    // Height\n    @for $i from 0 through 3 {\n      &[data-height=\"#{$i}\"] {\n        height: 8px + ($row-offset + ($icon-size * .5)) * $i;\n      }\n    }\n\n    // Horizontal\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: $arrow-width;\n    }\n\n    // Arrow down\n    &:after {\n      content: \"\";\n      position: absolute;\n      width: $arrow-width;\n      top: $arrow-width;\n      right: 0;\n      bottom: -3px;\n      background-image: url('../images/arrows/down.png');\n      background-position: center bottom;\n    }\n  }\n\n  &--right-down {\n    // Positioning based on cols\n    @for $i from 0 through 3 {\n      &[data-col=\"#{$i}\"] { \n        left: 2px + calcRightOffset($i);\n      }\n    }\n\n    &.arrow--active {\n      &:before { background-image: url('../images/arrows/rightdown-active.png'); }\n      &:after { background-image: url('../images/arrows/down-active.png'); }\n    }\n    \n    // Arrow to the right\n    &:before {\n      background-image: url('../images/arrows/rightdown.png');\n      background-position: center right;\n    }\n\n    // Arrow down\n    &:after {\n      right: 0;\n    }\n  }\n\n  &--left-down {\n    // Positioning based on cols\n    @for $i from 0 through 3 {\n      &[data-col=\"#{$i}\"] { \n        left: -2px + calcLeftOffset($i);\n      }\n    }\n\n    &.arrow--active {\n      &:before { background-image: url('../images/arrows/leftdown-active.png'); }\n      &:after { background-image: url('../images/arrows/down-active.png'); }\n    }\n    \n    // Arrow to the left\n    &:before {\n      background-image: url('../images/arrows/leftdown.png');\n      background-position: center left;\n    }\n\n    // Arrow down\n    &:after {\n      left: 0;\n    }\n  }\n}",".class-picker {\n  display: flex;\n  list-style: none;\n  padding: 0;\n\n  &--center {\n    justify-content: center;\n  }\n\n  &__class {\n    margin-right: 1em;\n    opacity: 1;\n    transition: all .1s ease-out;\n\n    &:hover {\n      opacity: 1;\n    }\n\n    &--active {\n      opacity: 1;\n    }\n\n    &--inactive {\n      opacity: .4;\n\n      &:hover {\n        opacity: .5;\n      }\n    }\n  }\n}",".playground-section {\n  margin-bottom: 2em;\n  padding-bottom: 2em;\n  border-bottom: 1px solid rgba(255, 255, 255, .1);\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}","@mixin tooltip-base {\n  font-size: 12px;\n  font-family: Verdana, Geneva, Tahoma, sans-serif;\n  line-height: 1.4;\n\n  &__inner {\n    display: inline-block;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__top {\n    display: flex;\n\n    &:after {\n      content: '';\n      padding: 3px;\n      background: url('../images/tooltip-background.png');\n      background-position: top right;\n    }\n  }\n\n  &__body {\n    min-height: 2px;\n    padding: 8px 4px 2px 10px;\n    background: url('../images/tooltip-background.png');\n    background-position: top left;\n  }\n\n  &__footer {\n    display: flex;\n    width: 100%;\n\n    &:before {\n      content: '';\n      flex: 1;\n      padding: 3px;\n      background: url('../images/tooltip-background.png');\n      background-position: bottom left;\n    }\n\n    &:after {\n      content: '';\n      padding: 3px;\n      background: url('../images/tooltip-background.png');\n      background-position: bottom right;\n    }\n  }\n}\n\n.tooltip {\n  @include tooltip-base;\n\n  &--inline {\n    display: inline-block;\n  }\n\n  &--fixed {\n    width: 320px;\n\n    .tooltip__inner {\n      width: 100%;\n    }\n\n    .tooltip__body {\n      flex: 1;\n    }\n  }\n\n  &__title {\n    font-size: 14px;\n    line-height: 1.3;\n    // margin-bottom: 1px;\n  }\n\n  &__body {\n    p:last-child {\n      margin-bottom: 2px;\n    }\n  }\n}"]}