/*
    - Name: "icon-box.scss"
    - Description: "Add custom styles to icon box component"
*/
.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item.empty-link.empty-description {
  align-items: center;
}

.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item.empty-link {
  border-top: 1px solid var(--colorGreys500);
}

.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item.empty-link .info-content .content-links {
  position: absolute;
  right: 0;
  margin-right: var(--spacingSm);
}

.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item.empty-link .info-content .content-links .c-link {
  font-size: 0;
  position: absolute;
  display: flex;
  justify-content: flex-end;
  padding: 0;
  align-items: baseline;
  margin-top: 0;
  color: var(--colorBlack);
  top: 0;
  right: 0;
}

.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item.empty-link .info-content .content-links .c-link:hover {
  text-decoration: none;
}

.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item {
  position: relative;
  width: 100%;
  line-height: normal;
  display: flex;
  flex-direction: column;
  gap: var(--spacingSm);
  padding: var(--spacingSm) 0;
}

.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item.empty-description.empty-link:has(.icon-content) {
  flex-direction: row;
}

.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item .icon-content {
  padding-left: 0;
}

.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item .info-content {
  width: 100%;
  padding: 0;
}

.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item .info-content .content-element {
  flex: 100%;
}

.component-icon-box .c-icon-boxes .field--name-icon-box-items .c-icon-box-item .info-content .content-links .c-link {
  margin-top: var(--spacingSm);
}

.component-icon-box .c-icon-boxes.col-1 .field--name-icon-box-items, .component-icon-box .c-icon-boxes.col-2 .field--name-icon-box-items, .component-icon-box .c-icon-boxes.col-3 .field--name-icon-box-items, .component-icon-box .c-icon-boxes.col-4 .field--name-icon-box-items {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.component-icon-box .c-icon-boxes.col-1 .field--name-icon-box-items {
  gap: var(--spacingMd);
}

.component-icon-box .c-icon-boxes.col-1 .field--name-icon-box-items .c-icon-box-item {
  width: 100%;
}

.component-icon-box .c-icon-boxes.col-2 .field--name-icon-box-items {
  gap: var(--spacingMd);
}

.component-icon-box .c-icon-boxes.col-2 .field--name-icon-box-items .c-icon-box-item {
  width: 100%;
}

@media all and (min-width: 50.0625rem) {
  .component-icon-box .c-icon-boxes.col-2 .field--name-icon-box-items .c-icon-box-item {
    width: calc(50% - var(--spacingXs));
  }
}
.component-icon-box .c-icon-boxes.col-3 .field--name-icon-box-items {
  gap: var(--spacingMd);
}

.component-icon-box .c-icon-boxes.col-3 .field--name-icon-box-items .c-icon-box-item {
  width: 100%;
}

@media all and (min-width: 50.0625rem) {
  .component-icon-box .c-icon-boxes.col-3 .field--name-icon-box-items .c-icon-box-item {
    width: calc(33% - 13px);
  }
}
@media all and (min-width: 78rem) {
  .component-icon-box .c-icon-boxes.col-3 .field--name-icon-box-items .c-icon-box-item {
    width: calc(33% - var(--spacingXs));
  }
}
.component-icon-box .c-icon-boxes.col-4 .field--name-icon-box-items {
  gap: var(--spacingMd);
}

.component-icon-box .c-icon-boxes.col-4 .field--name-icon-box-items .c-icon-box-item {
  width: 100%;
}

@media all and (min-width: 50.0625rem) {
  .component-icon-box .c-icon-boxes.col-4 .field--name-icon-box-items .c-icon-box-item {
    width: calc(50% - var(--spacingXs));
  }
}
@media all and (min-width: 78rem) {
  .component-icon-box .c-icon-boxes.col-4 .field--name-icon-box-items .c-icon-box-item {
    width: calc(25% - 18px);
  }
}
.component-icon-box .c-icon-boxes.type-framed .c-icon-box-item {
  border: 1px solid var(--colorGreys500);
  background: var(--colorWhite);
  padding: var(--spacingSm);
}

.component-icon-box .c-icon-boxes.type-framed .c-icon-box-item:has(.info-content .content-links):hover {
  filter: drop-shadow(0 6px 3px var(--shadowSm1Color));
  z-index: 2;
}

.component-icon-box .btn {
  margin: var(--spacingLg) 0 0;
}