CartoDB/cartodb20

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

.option-button.basemap_dropdown {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;

  strong {
    color: #FFF;
    font-weight: normal;
  }

  // Custom basemap icon
  & > .thumb {
    display: inline-block;
    margin: 0 5px 0 0;
    border-radius: 2px;
    background-color: rgba(#000, 0);
    background-position: 50% 50%;
    background-size: 34px;
    box-shadow: 0 0 1px rgba(#000, 0.9);
    vertical-align: top;

    @include position(6px, false, false, 6px);
    @include size(22px);

    &::before {
      content: ' ';
      border: 1px solid rgba(#000, 0.15);
      border-radius: 2px;

      @include position(0, 0, 0, 0);
    }
  } // thumb

  .info {
    display: inline-block;
    vertical-align: top;
  }
}

div.dropdown.basemap {

  border: 1px solid #999;

  div.custom {
    display: inline;
    vertical-align: top;
  }

  div.custom ul {
    display: flex;
    padding: 0 5px 0 10px;
    border-bottom: none;
    vertical-align: top;
  }

  div.custom > ul {
    box-sizing: border-box;
    width: auto;
    margin: 0 10px;
    padding: 10px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.35);

    & > li {
      &:first-child {
        width: 60px;
        margin: 5px 4px 0 0;
        color: #CCC;
      }
    }

    li {
      border: none;
      font-size: 13px;
    }
  }

  // Google thumbs
  .thumbs.gmaps {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 238px;
  }
  .thumbs.gmaps > li { margin: 3px 10px 3px 0; }

  .custom ul li {

    margin: 0 10px 0 0;

    &:last-child { margin-right: 0; }

    &.wms {
      .thumb {
        background-size: auto;

        @include map-sprite(wms);
      }

      a { line-height: 24px; }
    }

    &.selected .name { color: #7B7B7B; }

    &.hidden { display: none; }

    &:hover { background: none; }

    &.add_basemap > a {
      small,
      &:hover small {
        opacity: 0.5;
        color: #397DB8;
      }
    }

    &.map_background > a .name {
      margin: 5px 0 0 5px;
    }

    & > a {
      display: block;
      box-sizing: border-box;
      padding: 0;

      line-height: 13px;

      @include clearfix();

      small {
        display: block;
        margin: 0 0 0 29px;
        color: #AAA;
        font-size: 9px;
        line-height: 11px;
      }

      &:hover small {
        color: #AAA;
      }

      .name {
        width: 150px;
        margin: 0 0 0 5px;
        float: left;
        overflow: hidden;
        font-size: 13px;
        line-height: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &.add .thumb { border-color: #397DB8; }
      &:hover .thumb .remove_layer { opacity: 1; }

      .thumb {
        position: relative;
        float: left;
        border-radius: 2px;
        background-position: 50% 50%;
        background-size: 34px 34px;
        text-decoration: none;

        @include size(24px);
        @include text-indent();

        &::before {
          content: '';
          border: 1px solid rgba(#000, 0.15);
          border-radius: 2px;

          @include position(0,0,0,0);
        }

        .remove_layer {
          z-index: 2;
          padding: 0;
          transition: opacity 100ms ease-in;
          border-top-left-radius: 2px;
          border-bottom-right-radius: 2px;
          opacity: 0;
          background: rgba(black, 0.5);
          text-indent: 0;

          @include size(14px, 10px);
          @include position(false, 0, 0, false);

          &::before {
            content: ' ';
            border-top: 3px solid white;
            border-right: 3px solid transparent;

            border-left: 3px solid transparent;

            @include position(4px, false, false, 4px);
            @include size(0);
          }
        }

        &:hover {
          cursor: pointer;
          &::before { border: 1px solid rgba(#000, 0.5); }
        }
      }

      a .thumb { background-size: auto; }

      // Google thumbs

      @mixin google-thumbnail($name) {
        &.#{$name} .thumb {
          @include background(image-url('layout/gmaps-basemaps/#{$name}.png') no-repeat center center);
        }
      }

      @include google-thumbnail(roadmap);
      @include google-thumbnail(hybrid);
      @include google-thumbnail(satellite);
      @include google-thumbnail(terrain);
      @include google-thumbnail(gray_roadmap);
      @include google-thumbnail(cool_grey);
      @include google-thumbnail(clean_grey);
      @include google-thumbnail(shades_grey);
      @include google-thumbnail(neutral_blue);
      @include google-thumbnail(cleaner_midnight);
      @include google-thumbnail(icy_blue);
      @include google-thumbnail(red_hues);
      @include google-thumbnail(light_green);
      @include google-thumbnail(mostly_grayscale);

      &.add .thumb { @include map-sprite(plus); }
      &.pattern .thumb { @include elements-sprite(image_fill, $offset-x:5px, $offset-y:7px); }

      span.color {
        display: block;
        position: relative;
        width: 100%;
        height: 14px;
        padding: 15px 0;
        color: rgba(#999, 0.8);
        font: bold 9px $text-fonts;
        text-align: center;
        text-indent: 0;
        text-shadow: 0 0 1px rgba(#FFF, 0.5);
        text-transform: uppercase;
      }

      span.button {
        @include position(false, 2px, 2px, false);
        @include size(10px);
        z-index: 2;
        border-radius: 10px;
        background: white;
        text-indent: 0;

        &::before {
          content: ' ';
          border-top: 3px solid #397DBA;
          border-right: 2px solid transparent;

          border-left: 2px solid transparent;

          @include position(4px, false, false, 3px);
          @include size(0);
        }
      }
    }
  }
}