// $customizations-modal layout

.avatar-window
  float: right;
  margin: 0 1em 0 0    

menu
  padding: 0;
  margin: 0;

.customize-menu
  padding: 0;
  width: 100%;
  list-style: none;
  padding-bottom: 10px
  
  menu:before
    content: attr(label);
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 2

  .cost
    display: block
    margin-bottom: 5px

    .btn
      margin-left: 5px
      vertical-align: baseline

.customize-option
  border: 0px solid grey
  background-color: hsl(0, 0%, 93%)
  margin-bottom: 10px
  
  -webkit-transition: background-color 0.5s ease-out
  -moz-transition: background-color 0.5s ease-out
  transition: background-color 0.5s ease-out

.customize-option:active
  background-color: rgb(255, 242, 204);
  -webkit-transition: none
  -moz-transition: none
  transition: none
  
.customize-option:not(:last-of-type)
  margin-right: 10px
  

@media (max-width: 480px) {
  .avatar-window {
    float: none;
    margin-bottom: 1em
  }

  .customize-menu {
    width: 100%;
  }
}

.well.limited-edition
  padding: 5px
  margin: 25px 0 0

.background-unlocked
  border: 15px solid white
  width: 170px !important
  height: 177px !important

.background-locked
  border: 15px solid gray
  width: 170px !important
  height: 177px !important
  position: relative
  i
    position: absolute;
    right: -13px;
    bottom: -13px;
    color: white;
    top: auto;