/*-------------------
        Basic
--------------------*/

.basic.buttons .button,
.basic.button {
  background: var(--button-basic-background) !important;
  color: var(--button-basic-text-color) !important;
  font-weight: var(--button-basic-font-weight);
  border-radius: var(--button-basic-border-radius);
  text-transform: var(--button-basic-text-transform);
  text-shadow: none !important;
  box-shadow: var(--button-basic-box-shadow);
}
.basic.buttons {
  box-shadow: var(--button-basic-group-box-shadow);
  border: var(--button-basic-group-border);
  border-radius: var(--button-border-radius);
}
.basic.buttons .button {
  border-radius: 0em;
}

.basic.buttons .button:hover,
.basic.button:hover {
  background: var(--button-basic-hover-background) !important;
  color: var(--button-basic-hover-text-color) !important;
  box-shadow: var(--button-basic-hover-box-shadow);
}
.basic.buttons .button:focus,
.basic.button:focus {
  background: var(--button-basic-focus-background) !important;
  color: var(--button-basic-focus-text-color) !important;
  box-shadow: var(--button-basic-focus-box-shadow);
}
.basic.buttons .button:active,
.basic.button:active {
  background: var(--button-basic-down-background) !important;
  color: var(--button-basic-down-text-color) !important;
  box-shadow: var(--button-basic-down-box-shadow);
}
.basic.buttons .active.button,
.basic.active.button {
  background: var(--button-basic-active-background) !important;
  box-shadow: var(--button-basic-active-box-shadow) !important;
  color: var(--button-basic-active-text-color) !important;
}
.basic.buttons .active.button:hover,
.basic.active.button:hover {
  background-color: var(--button-transparent-black);
}

/* Vertical */
.basic.buttons .button:hover {
  box-shadow: var(--button-basic-hover-box-shadow) inset;
}
.basic.buttons .button:active {
  box-shadow: var(--button-basic-down-box-shadow) inset;
}
.basic.buttons .active.button {
  box-shadow: var(--button-basic-active-box-shadow) !important;
}

/* Standard Basic Inverted */
.basic.inverted.buttons .button,
.basic.inverted.button {
  background-color: transparent !important;
  color: var(--button-off-white) !important;
  box-shadow: var(--button-basic-inverted-box-shadow) !important;
}
.basic.inverted.buttons .button:hover,
.basic.inverted.button:hover {
  color: var(--button-white) !important;
  box-shadow: var(--button-basic-inverted-hover-box-shadow) !important;
}
.basic.inverted.buttons .button:focus,
.basic.inverted.button:focus {
  color: var(--button-white) !important;
  box-shadow: var(--button-basic-inverted-focus-box-shadow) !important;
}
.basic.inverted.buttons .button:active,
.basic.inverted.button:active {
  background-color: var(--button-transparent-white) !important;
  color: var(--button-white) !important;
  box-shadow: var(--button-basic-inverted-down-box-shadow) !important;
}
.basic.inverted.buttons .active.button,
.basic.inverted.active.button {
  background-color: var(--button-transparent-white);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
  box-shadow: var(--button-basic-inverted-active-box-shadow);
}
.basic.inverted.buttons .active.button:hover,
.basic.inverted.active.button:hover {
  background-color: var(--button-strong-transparent-white);
  box-shadow: var(--button-basic-inverted-hover-box-shadow) !important;
}


/* Basic Group */
.basic.buttons .button {
  border-left: var(--button-basic-group-border);
  box-shadow: none;
}
.basic.vertical.buttons .button {
  border-left: none;
}
.basic.vertical.buttons .button {
  border-left-width: 0px;
  border-top: var(--button-basic-group-border);
}
.basic.vertical.buttons .button:first-child {
  border-top-width: 0px;
}