@import "./product";
@import "./brand";

.ads-Button {
  @apply font-medium
    justify-center
    items-center
    border
    duration-200
    relative;
}

.ads-Button:focus {
  @apply outline-none
    shadow-focus;
}

.ads-Button-icon--left {
  @apply mr-2;
}

.ads-Button-icon--right {
  @apply ml-2;
}

.ads-Button-icon--invisible {
  @apply invisible;
}

.ads-Button-content--invisible {
  @apply invisible;
}

.ads-Button-loader {
  @apply absolute
    m-auto;
}

/* Button.Group */
.ads-ButtonGroup {
  @apply items-center;
}

.ads-ButtonGroup:not(.ads-ButtonGroup--isSegmented) {
  @apply flex-wrap;
}

.ads-ButtonGroup--isSegmented {
  @apply flex-nowrap;
}

.ads-ButtonGroup--isSegmented > .ads-Button:not(:first-of-type) {
  @apply rounded-l-none;
}

.ads-ButtonGroup--isSegmented > .ads-Button:not(:last-of-type) {
  @apply rounded-r-none
    border-r-0;
}

.ads-ButtonGroup:not(.ads-ButtonGroup--isSegmented)
  > .ads-Button:not(:last-of-type) {
  @apply mr-2;
}

.ads-ButtonGroup--isFullWidth > .ads-Button {
  flex: 1 1 auto;
}