@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

$maxHeroPortraitSize: 100px
$minHeroPortraitSize: 50px

$heroCanvasHeight: 265px

#choose-hero-view

  #hero-carousel
    margin: 0 auto 20px auto

    .carousel-indicator-container
      height: $maxHeroPortraitSize
      text-align: center
      width: 100%
      margin-bottom: 10px
      margin-top: 10px
      position: relative
      z-index: 1
  
      .carousel-indicators
        position: static
        height: $maxHeroPortraitSize
        width: 100%
        margin-left: 0
        background-repeat: no-repeat
  
        .hero-indicator
          width: $maxHeroPortraitSize
          height: $maxHeroPortraitSize
          margin: 0px 3px
          border: 2px solid black
          border-radius: 2px
          position: relative

          .hero-avatar
            width: 100%
            height: 100%
            background-size: contain
  
          &.initialized
            @include transition(0.5s ease)

          &.active
            border-color: gold

          &.locked
            .hero-avatar
              @include filter(contrast(50%) brightness(65%))

            .lock-indicator
              position: absolute
              width: 40%
              left: 30%
              top: 30%
              @include filter(invert(90%))
            
    .hero-item

      &.locked
        @include opacity(0.6)
  
      canvas, .hero-feature-image, .hero-stats
        width: 45%
        height: $heroCanvasHeight
        float: left
  
      canvas, .hero-feature-image
        margin-left: 5%

      .hero-feature-image
        display: none
        text-align: center

        img
          height: $heroCanvasHeight
  
      .hero-stats
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6)

        .hero-class, .hero-status, .hero-skills
          font-size: 14px

        .hero-stat
          margin: 10px 0

          .progress
            width: 90%
            text-align: center
            height: 26px
            position: relative
            margin: 0

            .hero-stat-label
              position: absolute
              width: 100%
              font-size: 18px
              text-transform: uppercase
              color: white
              text-shadow: 0px 1px 0px black, 0px -1px 0px black, -1px 0px 0px black, 1px 0px 0px black
  
    .carousel-control.left
      border-top-left-radius: 10px
      border-bottom-left-radius: 10px
  
    .carousel-control.right
      border-top-right-radius: 10px
      border-bottom-right-radius: 10px
  
    .carousel-control
      height: 75%
      top: 30%
      width: 10%

  .select-group
    display: inline-block
    min-height: 20px
    margin-top: 10px
    margin-bottom: 10px
    padding-left: 20px
    vertical-align: middle

    label
      margin-right: 20px
      margin-bottom: 0
      text-align: top

      &[for="option-code-language"]
        vertical-align: top
        margin-top: 10px

    select
      font-size: 18px

    .fancy-select
      display: inline-block
  
      .trigger, .options
        text-transform: none
        background-color: #def

      .options
        padding-left: 5px

        .selected
          color: #111

        .hover
          color: #111
          background-color: #abc

      .options
        li
          padding-left: 40px
          background: transparent url(/images/common/code_languages/javascript_small.png) no-repeat left center
          background-size: 32px 32px

          &[data-value="python"]
            background-image: url(/images/common/code_languages/python_small.png)
          &[data-value="coffeescript"]
            background-image: url(/images/common/code_languages/coffeescript_small.png)
          &[data-value="clojure"]
            background-image: url(/images/common/code_languages/clojure_small.png)
          &[data-value="lua"]
            background-image: url(/images/common/code_languages/lua_small.png)
          &[data-value="io"]
            background-image: url(/images/common/code_languages/io_small.png)