.media {
  @extend .u-display-flex;
  @include get-spacing(ph,m);
  @include get-spacing(pv,m);
}

.media--table {
  padding: 0;
}

.media__img {
  @include get-spacing(mr,m);
  @extend .img--thumbnail;
  @extend .img--x-small;
}

.media__img--small {
  @extend .img--small;
}

.media__content {
  @extend .u-flex-1;
}

.media,
.media + .media {
  @include get-spacing(m,0);
}

.media__subtitle {
  @extend .u-color-grey-base;
  @extend .u-font-size-7;
  @include u-text-overflow-ellipsis;
  @include get-line-height(1);
}

.media__title {
  @extend .u-font-size-6;
  @extend .u-color-grey-dark;
  @include u-text-overflow-ellipsis;
  @include get-line-height(1);
}

.media--sku {
  .media__title {
    @extend .u-font-weight-600;
  }
}

.media--sku__value {
  @extend .u-font-size-6;
  @extend .u-font-weight-700;
  @extend .u-bg-color-green-base;
  @extend .u-display-inline-block;

  color: white;
  padding: 2px 6px;
  // border: 1px lighten(palette(orange), 20%) solid;
  border-radius: 5px;
}

.media--sku__value.is-negative {
  @extend .u-bg-color-orange-base;

  // border: 1px lighten(palette(green), 20%) solid;
}

.media--selectable {
  cursor: pointer;
  background: white;

  &.active,
  &.active:hover {
    background: palette(blue, base);

    * {
      color: white;
    }
  }

  &:hover {
    background: rgba(255, 255, 255, 0.5);
  }
}

.media--selectable.active .media--sku__value,
.media--selectable.active:hover .media--sku__value {
  @extend .u-color-grey-white;
}