@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.custom-item-solr-searches {
  display: block;
  padding: var(--spacing-xl);
  border: 1px solid var(--color-grey-100);

  @include box-shadow(2px, 3px, 5px, rgba(var(--color-dark-rgb), 0.13));
  @include transition(all 0.4s);

  &:hover {
    background: var(--color-grey-100);

    @include box-shadow(2px, 3px, 20px, rgba(var(--color-dark-rgb), 0.13));
  }

  &__main {
    align-items: flex-start;

    img {
      margin-right: calc(var(--spacing-xl) + var(--spacing-s));
      max-width: 40px;
    }
  }

  &__title {
    margin-bottom: var(--spacing-xs);
  }

  &__extract {
    font-size: var(--font-size-h5);
  }

  &__title,
  &__extract {
    :deep(span) {
      position: relative;

      &::before {
        position: absolute;
        z-index: -1;
        top: 0;
        right: -2px;
        bottom: 0;
        left: -2px;
        background: var(--color-grey-100);
        content: '';
      }
    }
  }

  &__infos {
    justify-content: space-between;
    margin-top: var(--spacing-m);

    p {
      position: relative;
      color: var(--color-text-light);

      + p {
        padding-left: var(--spacing-s);
        margin-left: var(--spacing-s);

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 1px;
          height: 15px;
          background: var(--color-text);
          content: '';
        }
      }
    }
  }

  &__brands {
    img {
      max-width: 25px;

      + img {
        margin-left: var(--spacing-s);
      }
    }
  }

  + .custom-item-solr-searches {
    margin-top: 10px;
  }
}

.inside-radius {
  .custom-item-solr-searches {
    border-radius: var(--radius-m);
  }
}
