$backdrop-stacking-order: -1;
$content-stacking-order: 1;
$link-stacking-order: 2;
$action-stacking-order: 3;

$icon-size: rem(36px);
$link-extra-spacing: rem(6px);

.Polaris-Media {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  z-index: $content-stacking-order;
}

.Polaris-Media--link,
.Polaris-Media--active {
  &:after {
    content: "";
    position: absolute;
    top: -1 * $link-extra-spacing;
    left: -1 * $link-extra-spacing;
    right: -1 * $link-extra-spacing;
    bottom: -1 * $link-extra-spacing;
    border-radius: border-radius();
    z-index: $backdrop-stacking-order;
  }
}

.Polaris-Media--link {
  &:after {
    @include state(base);
  }
  &:hover {
    .Polaris-Media__Title {
      text-decoration: underline;
    }
    &:after {
      @include state(hover);
    }
  }
  &:active:after {
    @include state(press);
  }
}

.Polaris-Media--active {
  &:after {
    border: 1px solid color('blue');
    box-shadow: 0 0 0 2px rgba(color('blue'), 0.25);
  }
}

.Polaris-Media__Image {
  width: $icon-size;
  height: $icon-size;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: spacing();
  flex-shrink: 0;
}

.Polaris-Media__Content {
  align-self: center;
  flex-grow: 1;
}

.Polaris-Media__Link,
.Polaris-Media__Button {
  position: absolute;
  z-index: $link-stacking-order;
  top: -1 * $link-extra-spacing;
  left: -1 * $link-extra-spacing;
  right: -1 * $link-extra-spacing;
  bottom: -1 * $link-extra-spacing;
  opacity: 0;
}

.Polaris-Media__Header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: line-height(label);
}

.Polaris-Media__Badge {
  align-self: flex-start;
  margin-top: -1 * spacing(extra-tight);
  margin-left: spacing(tight);
  margin-right: -1 * spacing(extra-tight);
  margin-bottom: -1 * spacing(extra-tight);
}