@use "@material/rtl/_index" as rtl;
@use "~/util";

.segmented-button {
  display: flex;
  .segmented-button__segment {
    flex-grow: 1;
    @include rtl.reflexive-box(margin, right, -1px);
    min-width: 0;
    .mdc-button__ripple {
      border-radius: inherit;
    }
    &:not(.segmented-button__segment--selected) {
      @include util.half-divider-border(left);
      @include util.half-divider-border(right);
    }
    &.segmented-button__segment--only-icon .mdc-button__icon {
      margin: 0;
    }
    html:not([dir="rtl"]) & {
      &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      &:first-child {
        &:not(.segmented-button__segment--selected) {
          @include util.divider-border(left);
        }
      }
      &:last-child {
        &:not(.segmented-button__segment--selected) {
          @include util.divider-border(right);
        }
      }
    }
    @include rtl.rtl {
      &:not(:first-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      &:not(:last-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      &:first-child {
        &:not(.segmented-button__segment--selected) {
          @include util.divider-border(right);
        }
      }
      &:last-child {
        &:not(.segmented-button__segment--selected) {
          @include util.divider-border(left);
        }
      }
    }
    &:last-child {
      @include rtl.reflexive-box(margin, right, 0);
    }
    &--selected {
      z-index: 1;
    }
  }
}
