// $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

  &.hair
    width: 40px !important
    height: 40px !important

.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