@import 'compass/css3/images';
@import '../../old_common/vars';
@import '../../old_common/mixins';
@import '../../map/map-sprite';
@import '../../old_elements/elements-sprite';

div.dropdown.canvas_setup_dropdown {
  ul {
    width: 225px;
    padding: 10px;
    clear: both;
  }

  li {
    float: left;
    border: none;
    border-radius: 5px;
    background: #F2F2F2;

    &:first-child {
      margin-right: 1px;

      border-radius: 5px 0 0 5px;
    }

    &:last-child {
      border-radius: 0 5px 5px 0;
    }

    &:hover {
      a { background: image-url('layout/computer.png') no-repeat 50% 16px; }
      strong { opacity: 0.7; }
    }

    &.active {

      background: #F2F2F2;

      strong {
        opacity: 1;
        color: #397DB8;
      }

      &.desktop a { background: image-url('layout/computer.png') no-repeat 50% 16px; }
      &.mobile a { background: image-url('layout/mobile.png') no-repeat 50% 16px; }
    }

    a {
      display: block;
      position: relative;
      width: 86px;
      height: 58px;
    }

    strong {
      display: block;
      position: absolute;
      bottom: 16px;
      left: 0;
      width: 100%;
      opacity: 0.5;
      color: #444;
      font-size: 10px;
      text-align: center;
      text-transform: uppercase;
    }

    &.desktop a {
      background: image-url('layout/computer_disabled.png') no-repeat 50% 16px;
    }

    &.mobile a {
      background: image-url('layout/mobile_disabled.png') no-repeat 50% 16px;
    }
  }
} // canvas_setup_dropdown