/*-------------------
      Or Buttons
--------------------*/

.buttons ::slotted(button-or) {
  position: relative;
  width: var(--button-or-gap);
  height: var(--button-or-height);
  z-index: var(--button-or-z-index);
}
.buttons ::slotted(button-or):before {
  position: absolute;
  text-align: center;
  border-radius: var(--circular-radius);

  content: var(--button-or-text);
  top: 50%;
  left: 50%;
  background-color: var(--button-or-background-color);
  text-shadow: var(--button-or-text-shadow);

  margin-top: var(--button-or-vertical-offset);
  margin-left: var(--button-or-horizontal-offset);

  width: var(--button-or-circle-size);
  height: var(--button-or-circle-size);

  line-height: var(--button-or-line-height);
  color: var(--button-or-text-color);

  font-style: var(--button-or-text-style);
  font-weight: var(--button-or-text-weight);

  box-shadow: var(--button-or-box-shadow);
}
.buttons ::slotted(button-or)[data-text]:before {
  content: attr(data-text);
}

/* Fluid Or */
.fluid.buttons ::slotted(button-or) {
  width: 0em !important;
}
.fluid.buttons ::slotted(button-or):after {
  display: none;
}