.root {
  display: flex;
  flex:1;
  align-items: center;
  font-family: var(--fontFamily);
  color: var(--color);
  box-sizing: border-box;
  padding: var(--padding);
  border-bottom: var(--borderWidth) solid var(--borderColor);
}

.activityIndicator {
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.showLabel {
  margin-inline-start: var(--gutterWidth);
}

.contentPrimary {
  flex: 0 0 50%;
  margin-bottom: 0;
  margin-inline-start: var(--gutterWidth);
  box-sizing: border-box;
  min-width: 1px;
}

.contentSecondary {
  flex: 1 0;
  justify-content: flex-end;
  box-sizing: border-box;
  min-width: 1px;
  text-align: end;
}

.activityIndicator + .contentPrimary {
  margin-inline-start: calc(var(--gutterWidth) - var(--buttonPadding) - var(--activityIndicatorWidth));
}

.small {
  padding-left: 0;
  padding-right: 0;

  .contentPrimary {
    margin-inline-start: 10px;
    flex-basis: auto;
  }

  .contentSecondary {
    display: none;
  }
}
