// $customizations-modal layout

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

menu
  padding: 0;
  margin: 0;

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

.customize-option
  border: 1px solid grey;
  background-color: hsl(0, 0%, 93%);
  margin-bottom: 10px
  
  cursor: pointer;
  -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: 0px