/*-------------------
       Attached
--------------------*/

/* Singular */
.attached.button {
  position: relative;
  display: block;
  margin: 0em;
  border-radius: 0em;
  box-shadow: var(--button-attached-box-shadow);
}

.attached.button:active {
  box-shadow: var(--button-attached-pressed-box-shadow);
}

/* Top / Bottom */
.top-attached.button {
  border-radius: var(--button-border-radius) var(--button-border-radius) 0em 0em;
}
.bottom-attached.button {
  border-radius: 0em 0em var(--button-border-radius) var(--button-border-radius);
}

/* Left / Right */
.left-attached.button {
  display: inline-block;
  border-left: none;
  text-align: right;

  padding-right: var(--button-attached-horizontal-padding);
  border-radius: var(--button-border-radius) 0em 0em var(--button-border-radius);
}
.right-attached.button {
  display: inline-block;
  text-align: left;
  padding-left: var(--button-attached-horizontal-padding);
  border-radius: 0em var(--button-border-radius) var(--button-border-radius) 0em;
}

/* Plural */
.attached.buttons {
  position: relative;
  display: flex;
  border-radius: 0em;
  width: auto;
  z-index: var(--button-attached-z-index);
  margin-left: var(--button-attached-offset);
  margin-right: var(--button-attached-offset);
}
.attached.buttons .button {
  margin: 0em;
}
.attached.buttons .button:first-child {
  border-radius: 0em;
}
.attached.buttons .button:last-child {
  border-radius: 0em;
}

/* Top / Bottom */
.top-attached.buttons {
  margin-bottom: var(--button-attached-offset);
  border-radius: var(--button-border-radius) var(--button-border-radius) 0em 0em;
}
.top-attached.buttons .button:first-child {
  border-radius: var(--button-border-radius) 0em 0em 0em;
}
.top-attached.buttons .button:last-child {
  border-radius: 0em var(--button-border-radius) 0em 0em;
}

.top-attached.buttons {
  margin-top: var(--button-attached-offset);
  border-radius: 0em 0em var(--button-border-radius) var(--button-border-radius);
}
.top-attached.buttons .button:first-child {
  border-radius: 0em 0em 0em var(--button-border-radius);
}
.top-attached.buttons .button:last-child {
  border-radius: 0em 0em var(--button-border-radius) 0em;
}

/* Left / Right */
.left-attached.buttons {
  display: inline-flex;
  margin-right: 0em;
  margin-left: var(--button-attached-offset);
  border-radius: 0em var(--button-border-radius) var(--button-border-radius) 0em;
}
.left-attached.buttons .button:first-child {
  margin-left: var(--button-attached-offset);
  border-radius: 0em var(--button-border-radius) 0em 0em;
}
.left-attached.buttons .button:last-child {
  margin-left: var(--button-attached-offset);
  border-radius: 0em 0em var(--button-border-radius) 0em;
}

.right-attached.buttons {
  display: inline-flex;
  margin-left: 0em;
  margin-right: var(--button-attached-offset);
  border-radius: var(--button-border-radius) 0em 0em var(--button-border-radius);
}
.right-attached.buttons .button:first-child {
  margin-left: var(--button-attached-offset);
  border-radius: var(--button-border-radius) 0em 0em 0em;
}
.right-attached.buttons .button:last-child {
  margin-left: var(--button-attached-offset);
  border-radius: 0em 0em 0em var(--button-border-radius);
}