$thumbnailSize: 128px;
$thumbnailWidth: $thumbnailSize;
$thumbnailHeight: $thumbnailSize;

.dropdown-menu {
  input {
    display: none;
  }

  .koowa-modal {
    background: none;
    text-align: left;
    border: none;
    text-shadow: none;
    @include border-radius(0px);
    @include box-shadow(none);

    @include rtl {
      text-align: right;
    }

    &:hover, &:focus {
      text-decoration: none;
      color: $dropdownLinkColorHover;
      background-color: $dropdownLinkBackgroundHover;
      @include gradient-vertical($dropdownLinkBackgroundHover, darken($dropdownLinkBackgroundHover, 5%));
    }

    // Disabled state
    // --------------
    // Nuke hover effects
    &.disabled:focus,
    &.disabled:hover {
      text-decoration: none;
      background-color: transparent;
      background-image: none; // Remove CSS gradient
      cursor: default;
      color: $grayLight;
    }
  }
}

.thumbnail-picker {
  margin: 0;

  .thumbnail-controls,
  .thumbnail-preview,
  .thumbnail-info {
    display: block;
    padding-bottom: 4px;
  }

  .thumbnail-info {
    .alert {
      display: none;
      margin-bottom: 0;
      padding-right: 14px;

      @include rtl {
        padding-right: 0;
        padding-left: 14px;
      }

      &.show {
        display: inline-block;
      }
    }
  }

  .thumbnail {
    display: inline-block;

    .thumbnail-image {
      display: block;
      background-repeat: no-repeat;
      background-position: center;
      background-color: #eee;
      position: relative;
      @include size($thumbnailHeight, $thumbnailWidth);
      @include background-size(contain);

      // Custom function for stripping px from value
      @function strip-units($number) {
        @return $number/($number*0+1);
      }

      $thumbnailWidthRaw: strip-units($thumbnailWidth);
      $thumbnailheightRaw: strip-units($thumbnailHeight);

      &.placeholder:before {
        display: block;
        content: '#{$thumbnailWidthRaw}\0000d7#{$thumbnailheightRaw}';
        font-weight: bold;
        top: 50%;
        width: 100%;
        margin-top: -0.8em;
        text-align: center;
        position: absolute;
        font-size: 12px;
        line-height: 1.6em;
        color: #B8B8B8;
      }
    }

    .thumbnail-change {
      margin-top: 4px;
    }
  }
}