:host {
  /* scw element */
  position: relative;
  box-sizing: border-box;
  --margin-right: initial;
  --margin-bottom: initial;
  --gap-h-int: initial;
  --gap-v-int: initial;
  margin-right: var(--margin-right, var(--gap-h-int, initial));
  margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));
  display: block;
}

:host([warning]) {
  outline: 2px solid red !important;
}
.scw-icon-feature {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  width: 100%;
}
.scw-icon-feature > *:not(:last-child) {
  margin-right: var(--scw-spacing-2);
  --margin-right: var( --scw-spacing-2 );
}
.scw-icon-feature .icon {
  min-width: 100px;
  min-height: 100px;
  width: 100px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
}
.scw-icon-feature .heading {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: rgba(0, 0, 0, 0);
  align-self: stretch;
}
.scw-icon-feature .heading > *:not(:last-child) {
  margin-right: 0px;
  --margin-right: 0px;
}
.scw-icon-feature .h1 {
  text-align: LEFT;
  font: var(--scw-type-text-bold-09-font);
  color: var(--scw-color-grey-02);
  flex: 1;
}
.scw-icon-feature .h2 {
  text-align: LEFT;
  font: var(--scw-type-text-bold-08-font);
  color: var(--scw-color-grey-02);
  flex: 1;
}
.scw-icon-feature .h3 {
  text-align: LEFT;
  font: var(--scw-type-text-bold-07-font);
  color: var(--scw-color-grey-02);
  flex: 1;
}
.scw-icon-feature .h4 {
  text-align: LEFT;
  font: var(--scw-type-text-bold-06-font);
  color: var(--scw-color-grey-02);
  flex: 1;
}
.scw-icon-feature .h5 {
  text-align: LEFT;
  font: var(--scw-type-text-bold-font);
  color: var(--scw-color-grey-02);
  flex: 1;
}
.scw-icon-feature .h6 {
  text-align: LEFT;
  font: var(--scw-type-text-bold-04-font);
  color: var(--scw-color-grey-02);
  flex: 1;
}
.scw-icon-feature .heading-text {
  color: var(--scw-theme-body-color, var(--scw-color-grey-03));
}
.scw-icon-feature .content {
  background-color: rgba(0, 0, 0, 0);
  align-self: stretch;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  flex-grow: 1;
}
.scw-icon-feature .content > *:not(:last-child) {
  margin-bottom: calc(var(--scw-spacing-1) * 0.5);
  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
}
.scw-icon-feature .body {
  text-align: LEFT;
  font: var(--scw-type-text-04-font);
  color: var(--scw-color-grey-03);
  align-self: stretch;
  color: var(--scw-theme-body-color, var(--scw-color-grey-03));
}
.scw-icon-feature .carrot {
  --scw-icon-color: var( --scw-theme-body-color, clickable-text-vars.$color ) ;
}

:host([size=small]) .scw-icon-feature .icon {
  min-width: 80px;
  min-height: 80px;
  width: 80px;
  height: 80px;
}

:host([size=large]) .scw-icon-feature .icon {
  min-width: 120px;
  min-height: 120px;
  width: 120px;
  height: 120px;
}

:host([size=extra-small]) .scw-icon-feature .icon {
  min-width: 50px;
  min-height: 50px;
  width: 50px;
  height: 50px;
}

:host([href]) .heading-text {
  color: var(--scw-theme-body-color, var(--scw-color-grey-03));
}

:host([href]) .not-card:hover .heading-text {
  color: var(--scw-theme-color-hover, var(--scw-color-primary-03));
}
:host([href]) .not-card:hover .carrot {
  --scw-icon-color: var(--scw-theme-color-hover,var(--scw-color-primary-03));
}

:host([card]) {
  display: flex;
}
:host([card]) .scw-icon-feature {
  background-color: var(--scw-color-grey-10);
  border-radius: 10px 10px 10px 10px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--scw-color-grey-07);
  box-shadow: 0px 2px 19px 0px rgba(0, 0, 0, 0.09);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-left: var(--scw-spacing-2);
  padding-right: var(--scw-spacing-2);
  padding-top: var(--scw-spacing-2);
  padding-bottom: var(--scw-spacing-2);
}
:host([card]) .scw-icon-feature > *:not(:last-child) {
  margin-right: var(--scw-spacing-2);
  --margin-right: var( --scw-spacing-2 );
}
:host([card]) .content-wrapper {
  background-color: rgba(0, 0, 0, 0);
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
:host([card]) .content-wrapper > *:not(:last-child) {
  margin-right: var(--scw-spacing-2);
  --margin-right: var( --scw-spacing-2 );
}
:host([card]) .carrot {
  background-color: rgba(0, 0, 0, 0);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

:host([center]) .scw-icon-feature {
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  text-align: center;
}
:host([center]) .scw-icon-feature > *:not(:last-child) {
  margin-bottom: var(--scw-spacing-1);
  --margin-bottom: var( --scw-spacing-1 );
}
:host([center]) .scw-icon-feature .content-wrapper .icon {
  margin: none;
}
:host([center]) .scw-icon-feature .content-wrapper .heading-text {
  text-align: center;
}
:host([center]) .scw-icon-feature .content-wrapper .body {
  text-align: center;
}
:host([center]) .scw-icon-feature > :not(:last-child) {
  margin-right: 0;
}

:host([center][card]) .scw-icon-feature {
  background-color: var(--scw-color-grey-10);
  border-radius: 10px 10px 10px 10px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--scw-color-grey-07);
  box-shadow: 0px 2px 19px 0px rgba(0, 0, 0, 0.09);
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-left: var(--scw-spacing-2);
  padding-right: var(--scw-spacing-2);
  padding-top: var(--scw-spacing-2);
  padding-bottom: var(--scw-spacing-2);
}
:host([center][card]) .scw-icon-feature > *:not(:last-child) {
  margin-bottom: var(--scw-spacing-1);
  --margin-bottom: var( --scw-spacing-1 );
}

:host([card][href]) .scw-icon-feature:hover {
  background-color: var(--scw-color-grey-095);
  border-radius: 10px 10px 10px 10px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--scw-color-grey-07);
  box-shadow: 0px 2px 19px 0px rgba(0, 0, 0, 0.09);
}

a {
  text-decoration: none;
  display: flex;
  height: 100%;
  width: 100%;
}

.carrot-inline {
  display: inline;
  white-space: nowrap;
}
.carrot-inline .carrot {
  top: 3px;
  position: relative;
  left: -4px;
  width: 15px;
  height: 15px;
}

:host([heading-level=h1]) .carrot-inline .carrot,
:host([heading-level=h2]) .carrot-inline .carrot {
  width: 25px;
  height: 25px;
}

:host([heading-level=h3]) .carrot-inline .carrot {
  width: 22px;
  height: 22px;
}

:host([heading-level=h4]) .carrot-inline .carrot,
:host([heading-level=h5]) .carrot-inline .carrot {
  width: 18px;
  height: 18px;
}