/* prettier-ignore */
:host {
  position: relative;
  display: block;
  margin: 20px 0;
}
:host p {
  font-weight: 500;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  :host p {
    text-align: left;
  }
}
:host > div {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}
:host bce-button {
  --bce-c300:var(--bce-c300-light);
  --bce-c400:var(--bce-c400-light);
  --bce-c500:var(--bce-c500-light);
  --bce-c600:var(--bce-c600-light);
  --bce-c700:var(--bce-c700-light);
  --bce-con1:var(--bce-con1-light);
  --bce-con2:var(--bce-con2-light);
  --bce-con3:var(--bce-con3-light);
  --bce-con4:var(--bce-con4-light);
  flex: 0 0 auto;
  margin: 8px;
  transition: transform 0.2s ease-in-out;
  height: 68px;
}
:host bce-button[data-checked] {
  transform: scale(1.2);
}
:host bce-button bce-icon {
  display: flex;
  width: 100%;
  font-size: 44px;
  justify-content: center;
}
:host > small {
  position: absolute;
  font-size: 12px;
  bottom: -16px;
  left: 12px;
  text-align: left;
  transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--bce-c500-error);
}
:host > small:before {
  content: "";
  position: absolute;
  left: -6px;
  font-weight: 100;
}
@media screen and (min-width: 600px) {
  :host > div {
    flex-flow: row wrap;
  }
}
@media screen and (min-width: 1024px) {
  :host > div {
    justify-content: flex-start;
  }
}