:host {
  /**
   * @prop --background: Background of the button
   * @prop --border-color: Color of the button border
   * @prop --border-radius: Radius of the button border
   * @prop --border-style: Style of the button border
   * @prop --border-width: Width of the button border
   * @prop --color: Color of the button text
   * @prop --icon-size: Size of the button icon
   * @prop --margin-top: Top margin of the button
   * @prop --margin-end: End margin of the button
   * @prop --margin-bottom: Bottom margin of the button
   * @prop --margin-start: Start margin of the button
   * @prop --padding-top: Top padding of the button
   * @prop --padding-end: End padding of the button
   * @prop --padding-bottom: Bottom padding of the button
   * @prop --padding-start: Start padding of the button
   * @prop --transition: Transition of the button
   */
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  --icon-size: 1em;
  flex: 1;
  color: var(--color);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-kerning: none; }

:host(:first-of-type) .segment-button-native {
  --padding-end: 0;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: var(--border-radius); }

:host(:not(:first-of-type)) .segment-button-native {
  border-left-width: 0; }

:host(:last-of-type) .segment-button-native {
  --padding-start: 0;
  border-top-left-radius: 0;
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: 0; }

.segment-button-native {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  text-overflow: inherit;
  text-transform: inherit;
  text-align: inherit;
  white-space: inherit;
  color: inherit;
  margin: var(--margin-top) var(--margin-end) var(--margin-bottom) var(--margin-start);
  padding: var(--padding-top) var(--padding-end) var(--padding-bottom) var(--padding-start);
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transition: var(--transition);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  background: var(--background);
  color: inherit;
  contain: content;
  cursor: pointer;
  overflow: hidden; }
  .segment-button-native:active, .segment-button-native:focus {
    outline: none; }

::slotted(ion-icon) {
  font-size: var(--icon-size); }