/* =========================
   CCI Divider
   A thin divider line. Defaults to a 1px horizontal CCI gold gradient line;
   can be switched to vertical and to a solid colour via the widget controls.
========================= */

.cci-divider {
  display: flex;
  width: 100%;
  justify-content: center;
  line-height: 0;
}

.cci-divider *,
.cci-divider *::before,
.cci-divider *::after {
  box-sizing: border-box;
}

/* The line itself. CCI gold gradient by default (overridden when a solid
   colour is chosen via the widget control). */
.cci-divider__line {
  display: block;
  flex: 0 0 auto;
  background-image: linear-gradient(
    to right,
    #cb9b51 0%,
    #f6e27a 25%,
    #cb9b51 50%,
    #f6e27a 75%,
    #cb9b51 100%
  );
}

/* -------- Horizontal (default) -------- */
.cci-divider--horizontal .cci-divider__line {
  width: 100%;
  height: 1px;
}

/* -------- Vertical -------- */
.cci-divider--vertical {
  width: auto;
}

.cci-divider--vertical .cci-divider__line {
  width: 1px;
  height: 100px;
  background-image: linear-gradient(
    to bottom,
    #cb9b51 0%,
    #f6e27a 25%,
    #cb9b51 50%,
    #f6e27a 75%,
    #cb9b51 100%
  );
}