ul.horizontal {
  display:flex;

  li {
    flex: 1;
  }
}

ul.list {
  list-style-type: none;
  display: block;
  padding: 0;

  li {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
    display: block;
    padding-left: 40px;
    position: relative;
    display: flex;

    span {
      display: block;

      &.title {
        font-size: 1.25em;
      }

      &.subtitle {
        font-size: 0.85em;
        color: map-get($ds-gray-palette, gray-normal);
        margin-top: 0.25em;
      }
    }

    &.item-with-icon {
      flex-direction: row;
      padding-left: 5px;

      & span.list-icon {
        width: 35px;

        i, span {
          max-width: 35px;
        }
      }

      & span.list-icon {
        display: flex;
        justify-content: center;
        align-items: center;
      }
  
      & span.list-body {
        flex-direction: column;
      }
    }
  }
}