@import '../config/import';

.dashboard-story {
  padding: var(--su-4);
  align-items: center;
  display: grid;
  grid-gap: var(--su-1);
  grid-template-rows: auto auto;

  @media (min-width: $breakpoint-m) {
    grid-template-columns: 4fr 2fr 2fr;
    grid-template-rows: auto;
    grid-gap: var(--su-2);
  }

  & + & {
    border-top: 1px solid var(--base-10);
  }

  &:hover {
    background: var(--base-0);
    border-radius: inherit;
  }

  &__title {
    grid-column-end: span 2;

    // 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;
    @media (min-width: $breakpoint-m) {
      grid-column-end: unset;
    }
  }

  &__actions {
    justify-self: end;
    display: flex;
  }
}

.grid-cell {
  &__summary {
    color: var(--base-60);
    line-height: var(--lh-tight);
  }
}

.disabled-info-container {
  display: flex;
  flex-direction: row;
}

.disabled-info-icon {
  color: #666666;
  margin-right: 10px;
}

.disabled-info-text {
  color: #666666;
  text-align: left;
}
