.basemap-item {
  position: relative;
  width: 135px;
  margin-left: 0px;
  margin-right: 20px;
  margin-bottom: 10px;
  display: inline-block;

  &.no-margin {
    margin-right: 0;
  }

  .jimu-rtl & {
    margin-right: 0px;
    margin-left: 26px;

    &.no-margin {
      margin-left: 0;
    }
  }

  &__title {
    display:inline-block;
    width:100%;
    text-align:center;
    color:#232323;
    font-size:12px;
    font-family: 'Avenir Light';
    margin-top: 4px;
  }

  &.selected {
    .bg {
      &__selected-icon {
        display: block;
        background-image: url(images/Select.svg);
      }
    }
  }

  &.edit-mode:hover {
    .bg {
      &__detail-icon {
        display: block;
      }

      &__delete-icon {
        display: block;
      }
    }
  }

  &.select-mode {
    .bg {
      cursor: pointer;
    }

    &:hover {
      .bg {
        &__selected-icon {
          display: block;
        }
      }
    }
  }

  .bg {
    position:relative;
    width:100%;
    height:90px;
    line-height:28px;
    text-align:center;
    color:#999999;
    font-size:13px;

    &__thumbnail {
      width:100%;
      height:100%;
      background-repeat:no-repeat;
      background-position:center center;
      border:1px solid gray;
      background-size:cover;
    }

    &__detail-icon {
      display: none;
      position:absolute;
      right:0px;
      bottom:0px;
      width:20px;
      height:20px;
      background-color:rgba(0, 0, 0, 0.4);
      background-repeat:no-repeat;
      background-position:center center;
      background-image:url(images/edit_map.png);
      background-size: 50% 50%;
      cursor:pointer;

      .jimu-rtl & {
        left: 0px;
        right: auto;
      }
    }

    &__delete-icon {
      display: none;
      position:absolute;
      right:0px;
      top:0px;
      width:20px;
      height:20px;
      background-color:rgba(0, 0, 0, 0.4);
      background-repeat:no-repeat;
      background-position:center center;
      background-image:url(images/delete_map.png);
      background-size: 50% 50%;
      cursor:pointer;

      .jimu-rtl & {
        left: 0px;
        right: auto;
      }
    }

    &__selected-icon {
      display: none;
      position: absolute;
      cursor: pointer;
      left: 5px;
      top: 5px;
      width: 16px;
      height: 16px;
      background-image: url(images/Check-box-blank.svg);

      .jimu-rtl & {
        right: 5px;
        left: auto;
      }
    }

    &__warning-icon {
      display: block;
      position:absolute;
      left:7px;
      bottom:7px;
      width:20px;
      height:20px;
      background-repeat:no-repeat;
      background-position:center center;
      background-image:url(images/warning.png);
      cursor:pointer;
    }
  }
}