.attribute-preview {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5rem;
  width: 100%;

  .badge-border-wrapper {
    /*only needed when border left is needed*/
    &:has(+ *) {
      /* If it has siblings */
      border-right: 1px solid var(--light-gray);
      padding-right: 0.5rem;
    }
  }

  .attribute {
    align-items: center;
    flex: 0;
    flex-direction: row;
    white-space: nowrap;

    & *:not(tooltip *) {
      color: var(--ink-gray);
    }

    .attribute-detail {
      padding-left: 0;

      p {
        font-size: 0.875rem;
        line-height: 1rem;
      }
    }
  }
}

.attribute-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;

  .attribute-list-sm {
    gap: 0.5rem;
  }
}

.attribute-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;

  & > .attribute, & > turbo-frame {
    flex: 1;
  }

  &.compact  > .attribute {
    flex: 0;
  }
}

.attribute {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;

  header.attribute-term {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    height: 1.5rem;
    white-space: nowrap;
    width: 100%;

    h1, h2, h3, h4, h5, h6 {
      color: var(--ink-gray);
      flex: 1;
    }
  }

  .attribute-detail {
    padding-left: 1.25rem;
    white-space: nowrap;
    width: 100%;

    a {
      white-space: normal;
      width: inherit;
    }

    &:has(.avatar-group-wrapper) {
      display: inline-flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      min-height: 2.5rem;
      gap: 0.5rem;
    }
  }

  &:has(.attribute-hover-action) {

    .attribute-hover-action {
      opacity: 0;
      transition: 0.4s ease-in-out;
    }

    &:hover .attribute-hover-action {
      opacity: 1;
    }
  }

  &.border {
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 0.5rem;
  }

  &.horizontal, &.horizontal-left {
    align-items: center;
    flex-direction: row;

    .attribute-term {
      width: fit-content;
    }

    &.horizontal {
      gap: 1rem;
      justify-content: space-between;

      .attribute-detail {
        width: fit-content;
      }
    }

    &.horizontal-left {
      gap: 0.25rem;
      justify-content: flex-start;
    }

    .attribute-detail {
      padding-left: 0;
    }
  }

  &.nested {
    .attribute-detail:has(.attribute) {
      border-left: 1px solid var(--light-gray);
      margin-left: .5rem;
      padding-left: calc(.75rem - 1px); /* .75rem to align with .attribute-term - border */
    }

    .attribute {
      margin-top: 0.25rem;
    }
  }

  &.caption {
    & > * {
      color: var(--ink-gray);
    }
  }
}

/* ATTRIBUTE TYPES */
.attribute {
  &.attribute-success {
    header.attribute-term > * {
      color: var(--success);
      fill: var(--success);
    }
  }

  &.attribute-danger {
    header.attribute-term > * {
      color: var(--warning);
      fill: var(--warning);
    }
  }

  &.attribute-danger {
    header.attribute-term > * {
      color: var(--danger);
      fill: var(--danger);
    }
  }
}

/* BEM UPDATE (TO BE UPDATED) */
.attributes {
  width: 100%;

  &:has(> .attributes__preview), &:has(> .attributes__row--compact) {
    width: fit-content;
  }

  .attributes__preview {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: fit-content;

    .attributes__item {
      align-items: center;
      gap: 0.25rem;
      min-width: unset;

      .attributes__header .icon {
        min-width: 0.875rem;
        padding: 0;
        width: 0.875rem;
      }

      .attributes__body > * { /* same as p-caption */
        color: var(--ink-gray);
        font-size: 0.875rem;
        line-height: 1rem;
      }

      &:not(:last-child) {
        border-right: 1px solid var(--mid-gray);
        padding-right: 0.5rem;
      }
    }

    & > turbo-frame {
      &:not(:has(*)) {
        /* empty turbo frame (used on medium organisation membership card when no admin permissions) */
        display: contents;
      }

      &:not(:last-child) {
        border-right: 1px solid var(--mid-gray);
        padding-right: 0.5rem;
      }
    }
  }

  .attributes__row {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    .attributes__item, & > turbo-frame {
      flex: 1 1 0;
    }

    &.attributes__row--compact .attributes__item, &.attributes__row--compact > turbo-frame {
      flex: 0 1 auto;
      min-width: unset;
    }

    &.attributes__row--border {
      gap: 0.5rem;

      & > .attributes__item, & > turbo-frame {
        &:not(:last-child) {
          border-right: 1px solid var(--light-gray);
          padding-right: calc(0.5rem - 1px);
        }
      }
    }

    /* MODIFIER I: SIZE */
    &.attributes__row--sm {
      gap: 0.5rem;

      &.attributes__row--border {
        gap: 0.25rem;

        & > .attributes__item, & > turbo-frame {
          &:not(:last-child) {
            border-right: 1px solid var(--light-gray);
            padding-right: calc(0.25rem - 1px);
          }
        }
      }
    }
  }

  .attributes__flow {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    gap: 1rem;

    & > article.attributes__item, & > turbo-frame {
      flex: 1 1 calc(50% - 1rem);
      min-width: var(--container-s);
      width: 100%;
    }

    @media screen and (max-width: 768px) {
      & > article.attributes__item, & > turbo-frame {
        min-width: var(--container-xs);
      }
    }
  }

  .attributes__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &.attributes__list--border {
      .attributes__row, & > .attributes__item, & > turbo-frame {
        &:not(:last-child) {
          border-bottom: 1px solid var(--light-gray);
          padding-bottom: calc(1rem - 1px);
        }
      }
    }

    /* MODIFIER I: SIZE */
    &.attributes__list--sm {
      gap: 0.5rem;

      &.attributes__list--border {
        .attributes__row, & > .attributes__item, & > turbo-frame {
          &:not(:last-child) {
            border-bottom: 1px solid var(--light-gray);
            padding-bottom: calc(0.5rem - 1px);
          }
        }
      }
    }
  }

  .attributes__nested-wrapper {
    --nested-gap: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--nested-gap);

    article.attributes__item:not(:first-child) {
      --attribute-icon-size: 0.875rem;
      --tier-1-nesting: 1.5rem;
      margin-left: var(--tier-1-nesting);
      position: relative;

      &:before {
        border-bottom: 1px solid var(--attribute-color);
        border-left: 1px solid var(--attribute-color);
        border-radius: 1px;
        content: "";
        height: calc((var(--tier-1-nesting) / 2) + (var(--nested-gap) / 2));
        left: calc(-1rem - 1px);
        position: absolute;
        top: calc(var(--nested-gap) * -0.5);
        width: calc(var(--tier-1-nesting) / 2);
      }
    }
  }

  .attributes__item {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    min-width: var(--container-xs);

    /* MODIFIER II: SIZE */
    --attribute-icon-size: 1rem;

    &.attributes__item--lg { /* Used with h5 instead of h6 */
      --attribute-icon-size: 1.5rem;
    }

    /* MODIFIER III: COLORS */
    --attribute-color: var(--ink-gray);

    &.attributes__item--theme {
      --attribute-color: var(--theme-color-darker);
    }

    &.attributes__item--notice {
      --attribute-color: var(--brand-charcoal);
    }

    &.attributes__item--success {
      --attribute-color: var(--success-dark);
    }

    &.attributes__item--alert {
      --attribute-color: var(--yellow-darker);
    }

    &.attributes__item--warning {
      --attribute-color: var(--warning-dark);
    }

    &.attributes__item--danger {
      --attribute-color: var(--danger-dark);
    }

    &.attributes__item--admin {
      --attribute-color: var(--admin-color);
    }

    &.attributes__item--creator {
      --attribute-color: var(--creator-color);
    }

    &.attributes__item--publisher {
      --attribute-color: var(--publisher-color);
    }

    &.attributes__item--morning {
      --attribute-color: var(--danger-light);
    }

    &.attributes__item--afternoon {
      --attribute-color: var(--yellow-darker);
    }

    &.attributes__item--night {
      --attribute-color: var(--brand-charcoal);
    }

    &.attributes__item--secondary-theme {
      --attribute-color: var(--secondary-theme-color);
    }

    /* Attributes with link action */
    .attributes__action.link {
      opacity: 0.25;
      transition: 0.4s ease-in-out;
    }

    &:hover .attributes__action.link {
      opacity: 1;
    }

    .attributes__header {
      & > .icon, & > .icon * {
        fill: var(--attribute-color);
      }

      & > h5, & > h6 {
        color: var(--attribute-color);
      }
    }

    .attributes__header--ryalto-branding {
      & > .icon, & > .icon * {
        fill: var(--brand-turquoise);
      }
    }

    /* Attributes with Header */
    &:not(.attributes__item--horiz) {
      &:has(header.attributes__header h5), &:has(header.attributes__header h6), &:has(header.attributes__header .skeleton__text--h5), &:has(header.attributes__header .skeleton__text--h6) {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;

        .attributes__header {
          & > h5, & > h6 {
            color: var(--attribute-color);
          }
        }

        h6 {
          line-height: 1.5rem; /* Have the same line height as p */
        }

        .attributes__header:has(.attributes__action.btn) {
          width: 100%;

          .attributes__action.btn, form:has(.attributes__action.btn) {
            margin-left: auto;
          }
        }

        & > .attributes__body, & > turbo-frame {
          align-items: center;
          padding-left: calc(var(--attribute-icon-size) + 0.5rem); /* Indent value when there is a header - width of svg + gap */

          &:has(.badge__wrapper) {
            width: 100%;
          }
        }
      }
    }

    header.attributes__header .icon, .attributes__body > .icon {
      display: block;
      margin: auto 0;
      min-width: var(--attribute-icon-size);
      width: var(--attribute-icon-size);
    }

    header.attributes__header {
      align-items: center;
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
    }

    .attributes__body {
      display: flex;

      a, time {
        width: inherit;
        white-space: normal;
      }

      counter {
        margin-bottom: 0;
      }

      /* Icon Only Attributes */
      &:has(> :only-child):has(> svg) .icon {
        fill: var(--attribute-color);
      }
    }

    /*NESTED */
    &:has(.attributes__item--nested) {

      .attributes__item--nested {
        border-left: 1px solid var(--light-gray);
        margin-left: calc(1rem + 0.5rem);
        padding-left: 0.5rem;
      }
    }

    &.attributes__item--unavailable {
      & > .attributes__body {
        opacity: 0.5;

        & > p {
          font-style: italic;
        }
      }
    }
  }

  .attributes__modal-link > .attributes__item:hover * {
    color: var(--theme-color-darker);
    fill: var(--theme-color-darker);
    transition: 0.4s ease-in-out;
  }
}

.attributes__item {
  &#site-admin {
    min-height: 2.5rem;
  }

  /* Datetime */
  &:has(.attributes__body--datetime) {
    header.attributes__header {
      height: 1.5rem;
    }
  }
  .attributes__body.attributes__body--datetime {
    gap: 1.5rem;

    &:has(.time-duration) {
      justify-content: space-between;
      width: 100%;

      .time-duration {
        border-radius: 0.5rem;
        height: fit-content;
        margin-right: 1rem;
      }
    }
  }
}