.mm-button-secondary {
  color: var(--color-primary-default);
  border: 1px solid var(--color-primary-default);
  background-color: transparent;

  &:hover {
    color: var(--color-primary-inverse);
    background-color: var(--color-primary-default);
    box-shadow: var(--component-button-primary-shadow);
  }

  &:active {
    color: var(--color-primary-inverse);
    background-color: var(--color-primary-alternative);
    border-color: var(--color-primary-alternative);
  }

  &.mm-button--disabled {
    &:hover {
      color: var(--color-primary-default);
      box-shadow: none;
      background-color: transparent;
    }

    &:active {
      background-color: transparent;
    }
  }

  &--type-danger {
    color: var(--color-error-default);
    border: 1px solid var(--color-error-default);
    background-color: transparent;

    &:hover {
      color: var(--color-error-inverse);
      background-color: var(--color-error-default);
      box-shadow: var(--component-button-danger-shadow);
    }

    &:active {
      color: var(--color-error-inverse);
      background-color: var(--color-error-alternative);
      border-color: var(--color-error-alternative);
    }

    &.mm-button--disabled:hover {
      color: var(--color-error-default);
    }
  }
}