Text

            @use "../abstracts/css-util";

.heading1 {
    font-family: css-util.get-var(heading1,font);
    font-size: css-util.get-var(heading1,text-size);
    font-weight: css-util.get-var(heading1,text-weight);
    color: css-util.get-var(heading1,text-color);
    line-height: css-util.get-var(heading1,line-height);
}

.heading2 {
    font-family: css-util.get-var(heading2,font);
    font-size: css-util.get-var(heading2,text-size);
    font-weight: css-util.get-var(heading2,text-weight);
    color: css-util.get-var(heading2,text-color);
    line-height: css-util.get-var(heading2,line-height);
}

.heading3 {
    font-family: css-util.get-var(heading3,font);
    font-size: css-util.get-var(heading3,text-size);
    font-weight: css-util.get-var(heading3,text-weight);
    color: css-util.get-var(heading3,text-color);
    line-height: css-util.get-var(heading3,line-height);
    margin-inline: 0 !important;
    display: flex;
    align-items: center;
}

.heading4 {
    font-family: css-util.get-var(heading4,font);
    font-size: css-util.get-var(heading4,text-size);
    font-weight: css-util.get-var(heading4,text-weight);
    color: css-util.get-var(heading4,text-color);
    line-height: css-util.get-var(heading4,line-height);
    display: flex;
    align-items: center;
}

.paragraph {
    font-family: css-util.get-var(paragraph,font);
    font-size: css-util.get-var(paragraph,text-size);
    font-weight: css-util.get-var(paragraph,text-weight);
    color: css-util.get-var(paragraph,text-color);
    line-height: css-util.get-var(paragraph,line-height);

    &-align-center {
        text-align: center;
    }

    strong {
        font-weight: 600;
    }
}

.microcopy {
    color: css-util.get-var(microcopy,text-color) !important;
    font-family: css-util.get-var(paragraph,font);
    font-size: css-util.get-var(microcopy,text-size);
    font-weight: css-util.get-var(microcopy,text-weight);
    line-height: 1.4;

    &-label {
        font-style: italic;
        font-size: css-util.get-var(microcopy,text-size);
    }

    a {
        color: css-util.get-var(microcopy,text-color);
    }
}

.text-list  {
    list-style-position: inside;
    font-family: css-util.get-var(text-list,font);
    font-size: css-util.get-var(text-list,text-size);
    font-weight: css-util.get-var(text-list,text-weight);
    color: css-util.get-var(text-list,text-color);
    line-height: css-util.get-var(text-list,line-height);

    &-bullet {
        list-style-type: disc;
    }

    &-number {
        list-style-type: decimal;
    }
}

.text-row {
    display: flex;
    flex-direction: row;
    gap: 1.6rem;
    align-items: center;
    flex-shrink: 0;

    &-align-wide {
        justify-content: space-between;
    }

    p {
        margin:0;
    }
}

.text-group {
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   text-align: left;

    &-align-center {
        text-align: center;
        align-items: center;
    }
}
        

Heading

Default

heading1

heading2

heading3

heading4

            

heading1

heading2

heading3

heading4

Paragraph

Default

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam accusantium. Repellat, officia corporis.

			

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam accusantium. Repellat, officia corporis.

Center

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam accusantium. Repellat, officia corporis.

			

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam accusantium. Repellat, officia corporis.

Microcopy

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam accusantium. Repellat, officia corporis.

			

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam accusantium. Repellat, officia corporis.

List

  • list-item
  • list-item
  • list-item
  1. list-item
  2. list-item
  3. list-item
			
  • list-item
  • list-item
  • list-item
  1. list-item
  2. list-item
  3. list-item

Row

Lorem

Ipsum

Lorem

Ipsum

Lorem

Ipsum

			

Lorem

Ipsum

Lorem

Ipsum

Lorem

Ipsum

Group

Default

Heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quis suscipit illo natus repudiandae hic sit ipsum eaque consequatur, ipsam, unde explicabo. Nobis aspernatur est labore, magnam maiores numquam animi!

  • list-item
  • list-item
  • list-item
			

Heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quis suscipit illo natus repudiandae hic sit ipsum eaque consequatur, ipsam, unde explicabo. Nobis aspernatur est labore, magnam maiores numquam animi!

  • list-item
  • list-item
  • list-item

Center

Heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quis suscipit illo natus repudiandae hic sit ipsum eaque consequatur, ipsam, unde explicabo. Nobis aspernatur est labore, magnam maiores numquam animi!

  • list-item
  • list-item
  • list-item
			

Heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quis suscipit illo natus repudiandae hic sit ipsum eaque consequatur, ipsam, unde explicabo. Nobis aspernatur est labore, magnam maiores numquam animi!

  • list-item
  • list-item
  • list-item