@use "../../variables" as *;
@use "../../utils" as *;

/* Group */
.mie.buttons {
  display: inline-flex;
  flex-direction: row;

  .mie.button {
    border-right: 0.1rem solid mvar("button.border.color");
    border-radius: 0;

    &:first-child {
      border-top-left-radius: mvar("button.rounded");
      border-bottom-left-radius: mvar("button.rounded");
    }

    &:last-child {
      border-top-right-radius: mvar("button.rounded");
      border-bottom-right-radius: mvar("button.rounded");
      border-right: none;
    }
  }

  // Relaxed state for fluid buttons
  &.relaxed {
    .mie.button {
      flex: 1;
    }
  }
}
