.page-builder-pattern-list-item {
  &__description {
    line-height: 1.25;
    font-size: 11px;
    color: hsl(0, 0%, 35%);
    font-style: italic;
  }

  &__thumb {
    width: auto;
    height: 50px;
    margin-bottom: var(--space-m);
  }

  &__item-wrapper {
    width: 100%;
    transition: all var(--anim-base);

    &:hover {
      filter: grayscale(0%);
    }

    h5 {
      color: var(--c-text-default);
      font-size: 1rem;
      margin: 0 0 4px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    & > div {
      &:hover,
      &:active {
        cursor: pointer;
      }
    }

    a:link,
    a:visited {
      color: var(--c-text-link);
      font-size: calc(var(--font-base-size) * 0.61);
      text-decoration: none;
      transition: all var(--anim-base);
    }
    div[role='button']:focus,
    div[role='button']:active {
      outline: none;
    }

    &--thumb {
      width: calc(50% - var(--space-m));
      filter: grayscale(75%);

      h5 {
        font-size: inherit;
        margin: 0 0 var(--space-xs);
      }
    }

    &:not(.page-builder-pattern-list-item__item-wrapper--thumb) {
      background: var(--c-bg);
      padding: var(--space-xs) var(--space-xs) 3px;
      border: 1px solid var(--c-frame);
    }
  }
}