// ============================================================================
// :: List
// ============================================================================
/**
 * Default list component that can be defined by the use of <ul> or <dl>. Each
 * item can be only textual or a link towards another part of the site or any
 * external site.
 */

// ============================================================================
// :: Root
// ============================================================================
.m-list {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-list__term,
.m-list__data {
  &:last-of-type {
    margin-bottom: 0;
  }
}

.m-list__term {
  float: left;
}

.m-list__data {
  font-weight: $font-weight-bold;
  text-align: right;

  &::after {
    content: "";

    display: block;

    clear: left;
  }
}

.variant-deposito {
  .m-list__data {
    display: flex;
    justify-content: center;
  }
}

.m-list__item {
  display: flex;
  flex-direction: row;

  align-items: center;
  word-break: break-word;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-list--no-type {
  list-style-type: none;

  padding-left: 0;
}

.m-list--definition {
  margin: 0;
}

.m-list--definition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-left: 0;

  .m-list__data {
    text-align: left;
  }

  .m-list__item {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }
}

.m-list--small {

  .m-list__term,
  .m-list__data {
    font-size: $font-size-1x-small;
    line-height: $line-height-1x-small;
  }
}

html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .m-list__item {
    @include respond-to($breakpoint-tablet-default) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
  }
}

.m-list--with-icons {
  padding-left: 2rem;

  list-style: none;

  .m-list__item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    &+.m-list__item {
      margin-top: 1rem;
    }
  }

  .m-list__item[class*="icon-"]::before {
    //Style the icon
    margin-right: 1.5rem;
    margin-top: 0.4rem;
    padding: 0.3rem;

    color: $white;
    font-size: $icon-size-1x-small;

    background-color: $primary-color-base;
    border-radius: 100%;
  }
}

.m-list__item--bold {
  font-weight: bold;
}