.md-button-control-wrapper {
  align-items: center;
  background-color: var(--mds-color-theme-button-secondary-normal);
  border: var(--md-globals-border-clear);
  color: var(--mds-color-theme-text-primary-normal);
  cursor: pointer;
  display: flex;
  height: 2rem;
  justify-content: center;
  margin: 0;
  outline: none !important;
  padding: 0;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  width: 2rem;

  &:hover {
    background-color: var(--mds-color-theme-button-secondary-hover);
    color: var(--mds-color-theme-text-primary-normal);
  }

  &:active {
    background-color: var(--mds-color-theme-button-secondary-pressed);
    color: var(--mds-color-theme-text-primary-normal);
  }

  &[data-disabled='true'] {
    background-color: var(--mds-color-theme-button-secondary-normal);
    color: var(--mds-color-theme-text-primary-disabled);
    cursor: auto;

    &:hover {
      background-color: var(--mds-color-theme-button-secondary-normal);
      color: var(--mds-color-theme-text-primary-disabled);
    }

    &:active {
      background-color: var(--mds-color-theme-button-secondary-normal);
      color: var(--mds-color-theme-text-primary-disabled);
    }
  }

  &[data-circular='true'] {
    border-radius: 100vh;
    margin-left: 0.125rem;
  }
}