@import '../variables';
@import '../config/import';

.listings-columns {
  margin-bottom: var(--su-6);
  display: grid;
  gap: var(--su-2);

  @media (min-width: $breakpoint-m) {
    grid-gap: var(--su-4);
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}

.single-listing {
  $el: &;

  // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: hidden;

  &__dropdown {
    display: none;

    #{$el}:hover & {
      display: block;
    }

    #{$el}:focus-within & {
      display: block;
    }
  }

  &__tags {
    min-height: var(--su-4);
    font-size: var(--fs-s);
  }

  &__date {
    font-size: 0.85em;
    min-height: var(--su-4);
    color: var(--card-color-tertiary);
  }
}

// New/Edit Listing form
// Tags dropdown
// TODO: componentize styling..

.listingform {
  &__tagsoptions {
    background: var(--card-bg);
    color: var(--card-color);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius);

    position: absolute;
    left: 0;
    right: 0;
    top: calc(100%);
    z-index: var(--z-dropdown);
    padding: var(--su-1);
    left: calc(var(--su-1) * -1);
    right: calc(var(--su-1) * -1);
  }

  &__tagname {
    color: var(--base-90);
    font-weight: var(--fw-medium);
  }

  &__tagoptionrow {
    cursor: pointer;
    color: var(--link-color);
    padding: var(--su-3);

    &:hover {
      background: var(--link-bg-hover);
      .crayons-tag {
        color: var(--link-color-hover);
      }
    }

    &--active {
      background: var(--link-bg-hover);
      .crayons-article-form__tagname {
        color: var(--link-color-hover);
      }
    }
  }

  &__tagrules,
  &__tagsoptionrulesbutton,
  &__tagsoptionsbottomrow,
  &__tagrules--inactive {
    display: none;
  }
}

.listings-modal {
  .crayons-modal__box__body {
    padding: 0;
  }
}
