.ps-classified {
  --radius: var(--BORDER-RADIUS--MD);

  position: relative;
  min-width: 0;
  margin-bottom: var(--PADD--MD);
  background-color: var(--PS-COLOR--APP);
  box-shadow: var(--BOX-SHADOW--HARD);
  border-radius: var(--radius);

  .adverts-inline-icon.adverts-inline-icon-info::before {
    color: var(--PS-COLOR--PRIMARY--LIGHT);
  }

  .adverts-manage-action {
    @include reset--button;
    @include button;

    --font-size: 90%;
    --line-height: 1.2;
    --bg: var(--PS-COLOR--APP);
    --bg--hover: var(--PS-COLOR--APP--GRAY);
    --border: var(--DIVIDER--LIGHT);

    padding: var(--PADD);
    height: auto;
    overflow: visible;

    span {
      font-size: 100%;
    }
  }
}

.ps-classified--featured {
  box-shadow: 0 0 0 2px var(--PS-COLOR--PRIMARY--LIGHT);
}

.ps-classified--sold {
  position: relative;
}

.ps-classified--post {
  margin-bottom: 0;
  border-radius: 0;
  border-top: 1px solid var(--DIVIDER--LIGHT);
  border-bottom: 1px solid var(--DIVIDER--LIGHT);
  box-shadow: none;
}

.ps-classified__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 250px;

  .ps-classified--post & {
    flex-direction: row;
    min-height: unset;

    @include mq($until: desktop) {
      flex-direction: column;
    }
  }
  .ps-classifieds__grid & {
    flex-direction: column;
    height: 100%;
  }

  @include mq($until: desktop) {
    flex-direction: column;
  }

  .ps-form--repost & {
    flex-direction: column;
  }
}

.ps-classified__label {
  padding: var(--PADD--SM) var(--PADD);
  font-size: 65%;
  text-align: center;
  text-transform: uppercase;
  color: var(--PS-COLOR--WARNING--DARK);
  background-color: var(--PS-COLOR--WARNING--ULTRALIGHT);
}

.ps-classified__label--sold {}

.ps-classified__label--sold-top {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: 1px solid var(--PS-COLOR--WARNING--LIGHT);

  .ps-classified--post & {
    border-radius: 0;
  }
}

.ps-classified__label--sold-bottom {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-top: 1px solid var(--PS-COLOR--WARNING--LIGHT);

  .ps-classified--post & {
    border-radius: 0;
  }
}

.ps-classified__photo {}

.ps-classified__photo-link {
  display: block;
  width: 250px;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;

  @if $rtl {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  } @else {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
  }

  > img {
    max-width: 100%;
    opacity: 0;
  }

  .ps-classified--post &,
  .ps-classifieds__grid & {
    max-width: 100%;
    width: 200px;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);

    @include mq($until: desktop) {
      max-width: 100%;
      width: auto;
      min-width: 200px;
    }
  }

  .ps-classified--post & {
    border-radius: 0;
  }

  @include mq($until: desktop) {
    max-width: 100%;
    width: auto;
    min-width: 200px;
    border-radius: 0;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.ps-classified__body {
  flex-grow: 2;
  padding: var(--PADD--MD);

  .ps-classifieds__grid & {
    display: flex;
    flex-direction: column;
  }
}

.ps-classified__title {
  display: block;
  margin-bottom: var(--PADD);
  font-weight: bold;
  color: var(--PS-COLOR--TEXT);

  &:hover,
  &:focus {
    color: var(--PS-COLOR--TEXT);
  }
}

.ps-classified__price {
  display: inline-block;
  margin-top: var(--PADD--MD);
  padding: var(--PADD);
  font-size: 90%;
  font-weight: bold;
  color: var(--PS-COLOR--TEXT--INVERT);
  background-color: var(--PS-COLOR--PRIMARY--LIGHT);
  border-radius: var(--BORDER-RADIUS);

  > a {
    color: var(--PS-COLOR--TEXT--INVERT);

    &:hover,
    &:focus {
      color: var(--PS-COLOR--TEXT--INVERT);
    }
  }

  .ps-classifieds__grid & {
    margin-bottom: var(--PADD);
  }
}

.ps-classified__content {
  max-height: calc(var(--PS-LINE-HEIGHT) * 2em);
  font-size: 90%;
  line-height: var(--PS-LINE-HEIGHT);
  color: var(--PS-COLOR--TEXT--LIGHT);
  overflow: hidden;

  .ps-classifieds__grid & {
    margin-bottom: var(--PADD--MD);
  }
}

.ps-classified__meta-wrapper {
  margin-top: var(--PADD--MD);
  margin-left: calc(-1 * var(--PADD--MD));
  margin-right: calc(-1 * var(--PADD--MD));
  padding: var(--PADD) var(--PADD--MD);
  font-size: 80%;
  line-height: 1.8;
  color: var(--PS-COLOR--TEXT--LIGHT);
  background-color: var(--PS-COLOR--APP--GRAY);

  > .adverts-inline-icon {
    @if $rtl {
      margin-left: var(--PADD);
    } @else {
      margin-right: var(--PADD);
    }
  }

  .ps-classifieds__grid & {
    margin-top: auto;
  }

  .ps-classified--post & {
    margin-top: var(--PADD);
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    line-height: var(--PS-LINE-HEIGHT);
    background-color: transparent;
  }
}

.ps-classified__meta {
  display: inline-block;

  @if $rtl {
    margin-left: var(--PADD);
  } @else {
    margin-right: var(--PADD);
  }

  > i {
    @if $rtl {
      margin-left: var(--PADD--SM);
    } @else {
      margin-right: var(--PADD--SM);
    }
  }

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

.ps-classified__meta-author {}

.ps-classified__meta-date {}

.ps-classified__meta-location {}

.ps-classified__meta-status {}

.ps-classified__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;

  .ps-classifieds__grid & {
    display: block;
  }
}

.ps-classified__actions-inner {
  justify-content: flex-end;
  margin-top: var(--PADD);

  .ps-classifieds__grid & {
    justify-content: flex-start;
  }
}

.ps-classified__action {
  text-align: center;

  .ps-classifieds__grid & {
    flex-grow: 1;
  }

  @include mq($until: desktop) {
    > span {
      display: none;
    }
  }
}

.ps-classified__delete-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  background-color: var(--PS-COLOR--APP);
  border-radius: var(--radius);
  opacity: .9;
}

.ps-classified__delete-box-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--PADD--MD);
}

.ps-classified__delete-box-notice {
  display: block;
  margin-bottom: var(--PADD);
}