/*
    - Name: "timeline-item.scss"
    - Description: "Add custom styles to timeline item component"
*/
.micon.iconXs {
  width: var(--sizeXs);
  height: var(--sizeXs);
}

.micon.iconSm {
  width: var(--sizeSm);
  height: var(--sizeSm);
}

.micon.iconMd {
  width: var(--sizeMd);
  height: var(--sizeMd);
}

.micon.iconLg {
  width: var(--sizeLg);
  height: var(--sizeLg);
}

.micon.iconXl {
  width: var(--sizeXl);
  height: var(--sizeXl);
}

.micon.icon2xl {
  width: var(--size2xl);
  height: var(--size2xl);
}

.c-timeline-item {
  padding: 0 var(--spacingLg) var(--spacingLg);
  position: relative;
}

.c-timeline-item::before {
  content: "";
  display: block;
  width: 1px;
  background: var(--colorBlack);
  position: absolute;
  height: 100%;
  left: var(--spacingXs);
  top: var(--spacing3xs);
}

.c-timeline-item:last-child {
  padding-bottom: 0;
}

.c-timeline-item .title-text-description {
  display: -webkit-box;
  overflow: hidden;
  max-height: 50px;
}

.c-timeline-item .title-text-description.show {
  display: block;
  max-height: 100%;
}

.c-timeline-item .title-text-description.show .field--name-description-format {
  display: block;
  max-height: 100%;
}

.c-timeline-item .title-text-description.show .title-text-document {
  display: block;
}

.c-timeline-item .title-text-description .field--name-description-format {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  min-height: 50px;
}

.c-timeline-item .title-text-description .field--name-description-format p {
  font-family: var(--baseDefaultFontFamily), sans-serif;
  font-size: var(--baseDefaultFontSize);
  font-weight: var(--baseDefaultFontWeight);
  line-height: var(--baseDefaultLineHeight);
  text-align: left;
  padding: 0;
  margin: 0;
}

.c-timeline-item .title-text-description .field--name-description-format ul {
  margin: 0;
}

.c-timeline-item .title-text-description .field--name-description-format ul li {
  margin-bottom: 0;
}

.c-timeline-item .title-text-description .title-text-document {
  display: none;
  margin: var(--spacingSm) 0 0;
}

.c-timeline-item .title-text-description .title-text-document .heading {
  font-family: var(--baseBoldFontFamily), sans-serif;
  font-size: var(--baseBoldFontSize);
  font-weight: var(--baseBoldFontWeight);
  line-height: var(--baseBoldLineHeight);
  text-align: left;
  margin: 0;
}

.numbers .c-timeline-item .type-timeline {
  font-family: var(--smallBoldFontFamily), sans-serif;
  font-size: var(--smallBoldFontSize);
  font-weight: var(--smallBoldFontWeight);
  line-height: var(--lineHeightXl);
  text-align: center;
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--colorBlack);
  left: 0;
  top: 0;
  color: var(--colorWhite);
}

.bullets .c-timeline-item .type-timeline {
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--colorWhite);
  left: 5px;
  top: 6px;
  border: 6px solid var(--colorBlack);
}