.button-label-states(@prefix, @type, @normal, @hover, @active, @isModernTheme: false) {
  .@{prefix}.@{type} {
    .@{prefix}__label {
      color: @normal;
    }

    &:not(.disabled, :disabled):hover .@{prefix}__label {
      color: @hover;
    }

    &:active .@{prefix}__label,
    input[type="button"]:active ~ .@{prefix}__label {
      color: @active;
    }

    &.secondary {
      .tw-icon {
        color: @normal;
      }

      &:not(.disabled, :disabled):hover .tw-icon,
      input[type="button"]:active + .tw-icon {
        color: white;
        & when (@isModernTheme = true) {
          color: var(--color-interactive-control);
        }
      }

      &:active input[type="button"] + .tw-icon when (@isModernTheme = true) {
        color: var(--color-interactive-control);
      }
    }
  }
}
