// Place all the styles related to the Backend::MapLayers controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

$map-width: 240px;
$map-height: 135px;

.map-layers-viewport {
  .map-layer-heading {
    clear: both;
    margin: $default-gap * 2;
    .map-layer-title {
      font-size: $fs-large;
      line-height: $lh-large;
      border-bottom: $menu-border;
    }
  }
  .map-layer-container {
    @include make-xs-column(12, $gutter: 0);

    @media (min-width: $screen-sm-min) {
      float: left;
      width: auto;
      position: relative;
      min-height: 1px;
      padding-left:  0;
      padding-right: 0;
    }

    .map-layer {

      @include normal-shadow();
      @include box-sizing(border-box);
      margin: 2 * $default-gap;
      background: #FFF;
      @include border-radius($default-border-radius);
      overflow: hidden;
      outline: $default-border-radius solid transparent;

      @media (min-width: $screen-sm-min) {
        float: left;
        width: $map-width;
      }

      &:not(.active):hover {
        & > * {
          cursor: pointer;
        }
      }
      &:hover > * {
        cursor: pointer;
      }

      &.active {
        outline-color: $base-color;
      }

      .map-layer-header {
        padding: $default-gap;
        @include box-sizing(border-box);

        &, * {
          line-height: $lh-normal;
          font-size: $fs-normal;
        }

        .map-layer-name {
          @include ellipsis;

          margin-right: 2%;

          &:hover a.map-layer-edit {
            @include icon-after(pencil, $font-size: $fs-normal);
          }
        }

        .map-layer-icon {
          @include float(right);
          width: 8%;
          margin-right: 2%;
          &:nth-last-child(1) {
            margin-right: 0;
          }
        }
        .map-layer-by-default {
          @include icon-before(star-o, $font-size: $fs-normal);
          text-align: right;
          &.active {
            @include icon-before(star, $font-size: $fs-normal);
          }

          &.hide {
            visibility: hidden;
          }
        }

        .map-layer-delete {
          float: right;
          & > a {
            @include icon-before(times, $font-size: $fs-normal);
          }
        }
      }
      .map-view {
        background: mix($desktop-background, $success-color);
        height: $map-height;
        clear: both;
      }
    }
  }
}
