@import (reference) "./../styles/less/mixins/_logical-properties.less";

.tw-definition-list {
  &__item dd {
    word-break: break-all;
    word-break: break-word;
  }

  &__action {
    align-self: center;
    flex-shrink: 0;
  }

  &__button {
    margin-top: -50%;
  }

  @media (max-width: 576px) {
    &--right-aligned-desktop {
      justify-content: space-between;
    }
  }

  @media (min-width: 576px) {
    &--right-aligned-desktop {
      justify-content: flex-end;
    }

    &.tw-definition-list--columns {
      flex-wrap: wrap;

      .tw-definition-list__item {
        width: 50%;
      }
    }

    &.tw-definition-list--horizontal {
      .tw-definition-list__item {
        display: flex;

        dt {
          flex: 1;
          min-width: 150px;
          max-width: 30%;
          .margin(right, var(--size-8));
        }

        dd {
          flex: 1;
          align-items: center;
          margin-bottom: var(--size-8);
        }
      }
    }
  }

  .np-theme-personal & {
    dt {
      color: var(--color-content-secondary);
    }
  }
}